Interface

UI of the SDK

Common UI

Instead of directly proceeding with login, it is possible to open the modal for users to see the selectable social login list.

Login/Signup modal

When it's used ?

• sdk.login({isModal: true}) is called.

This modal is not activated as default

• If you hide modal, you may want to put Terms of Service and its link on your application.

• It's not possible to remove [View more options] dropdown.

• The order of icons is arranged based on the order of the values in loginProvider array except Google, Email Password and Email Passwordless.

  • For example, loginProvider: ["google", "apple", "line"] allocates the order from Google on the top followed by Apple and LINE underneath.

Expected Parameters and Result with example case of google & line

withModal	[’google’]	[’google’,’line’]	undefined
true	Modal: google	Modal: google, line	Modal: ALL
false	Direct Login without modal	Google Login without modal	Google Login without modal
undefined	Direct Login without modal	Modal: google, line	Modal: ALL

Signature Modal

When it's used ?

• sdk.signMessage is called

As default, signMessage() is executed with an arbitrary string prepended to the message under the hood of Web3Auth library.

This enables skipping the signature modal popup and user consent process. The drawback of this is to require additional backend development. See more details.

Required implementation on clients’ backend Web3Auth

Installation | Documentation

UI Samples with combination of parameters

{loginProvider: ['email_password'], authAction: { login: true, signup: false }, withModal: true}

{loginProvider: ['email_password'], authAction: { login: false, signup: true }, withModal: true}

{authAction: { login: false, signup: true },loginProvider: ['google', 'email_password'],withModal: true}

{authAction: { login: true, signup: falsse },loginProvider: ['google', 'email_password'],withModal: true}

{customUI: { words: { ja: { modal: { termsConditions: 'アカウント登録に伴い、Startbahn Port のプライバシーポリシーを含む、利用規約に同意します', termsConditionsLinkUrl: 'https://google.com' } }, withModal: true,authAction: { login: true, signup: false },loginProvider: [ 'google']}

{loginProvider: ['google', 'line', 'twitter', 'email_passwordless'], authAction: { login: true, signup: false }, withModal: true}