WEPIN Developer Documentation
WepinBlogContact
English
English
  • Get Started
    • Introduction
  • Wepin
    • Features
    • Architecture
      • Key Generation
      • Signing
      • Key Backup
    • Workspace
      • App Registration and Key Issuance
      • Networks and Assets Addition
      • Widget Design
    • Supported blockchains
    • Account Abstraction
  • login
    • Overview
    • Social Login Auth Providers
      • Email/Password
      • Google
      • Apple
      • Discord
      • Naver
      • Facebook
      • Line
      • Kakao
    • User Interface
    • Simplified Login
    • Resource
  • Widget Integration
    • Prerequisites
    • Web: JavaScript SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
      • Provider
        • Ethereum Provider
        • Kaia Provider
        • Solana Provider
        • Wagmi Connector
      • Wallet Adapter
        • Solana Wallet Adapter
    • Android: Java & Kotlin SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget Library
        • Installation
        • Initialization
        • Methods
    • iOS: Swift SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
      • Widget Library
        • installation
        • initialization
        • Methods
    • Flutter SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
      • PIN Pad Library
        • Installation
        • Initialization
        • Methods
    • React Native SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
    • Unity SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • Compose Multiplatform SDK
      • Login Library
        • Installation
        • Initialization
        • Methods
      • Widget
        • Installation
        • Initialization
        • Methods
        • Final Review
  • API
    • Overview
    • Registration
    • Login
    • Wallet
    • Token and NFT
    • Transaction
  • Deprecated
    • Web: JavaScript SDK
      • SDK
        • Installation
        • Initialization
        • Methods
        • Final Review
      • Provider
        • EVM-Compatible Networks
      • Wagmi Connector
    • Android: Java & Kotlin SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • iOS: Swift SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • Flutter SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
    • React Native SDK
      • Installation
      • Initialization
      • Methods
      • Final Review
      • Providers
        • Ethereum Providers
  • MISC
    • Logo & Brand
Powered by GitBook
On this page
  • Using the Default Widget Login UI
  • Implementing a Custom Login UI
  • Using Simplified Login UI

Was this helpful?

  1. login

User Interface

Wepin supports various login UI options, allowing developers to customize the login experience according to user needs. The login UI functionality is divided into three main approaches, enabling users to either use Wepin's default UI or create a custom UI.

Using the Default Widget Login UI

Wepin's widget provides a basic login UI that supports easy social login implementation through OAuth Providers. This UI can be used immediately without any custom work, and it supports major social logins such as Google, Apple, Naver, and Discord.

  • After installing and initializing the Widget SDK, call the loginWithUI method to display the login UI to users.

Implementing a Custom Login UI

Instead of using Wepin's default UI, you can design and implement a custom UI. This approach allows you to maintain the unique design of your app and provide a tailored user experience. In this method, you will need to integrate the custom UI with Wepin's login functionality, ensuring that the login process aligns with your app's unique user flow and interface.

Email/Password Login

  • Use the loginWithEmailAndPassword method to log in with an email, then pass the authentication information to Firebase to complete the authentication process.

  • After that, use the loginWepin method to log in to Wepin using the Firebase Token.

OAuth Provider Login

  • (When using the Web SDK) Use the loginWithOauthProvider method to log in through the OAuth Provider, then pass the authentication information to Firebase to complete the authentication process.

  • (When using SDKs other than Web) Use the loginWithOauthProvider method to log in through the OAuth Provider and obtain an OAuth Token (either an Access Token or an ID Token).

  • Then, use the loginWithIdToken or loginWithAccessToken method to pass the OAuth Token to Firebase and complete the authentication process.

  • Finally, use the loginWepin method to log in to Wepin using the Firebase Token.

Using Simplified Login UI

The Simplified Login feature allows you to handle app registration and wallet login in a single process. This approach simplifies the user experience, enabling access to both the app and the wallet with a single login.

  • You can implement Simplified Login by using the loginWithIdToken and loginWithAccessToken methods in the login library to process OAuth and Firebase tokens.

For more detailed information, please refer to the Simplified Login page.

PreviousKakaoNextSimplified Login

Last updated 8 months ago

Was this helpful?

Simplified Login