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

Email Passwordless without a modal (v2.2.0+)

Email Passwordless previously always opened the selection modal (the user still had to type their email there). From v2.2.0, if you configure a single email_passwordless provider and supply the user's email as loginHint, the SDK starts the passwordless flow directly and skips the modal entirely.

Configuration	Result
loginProvider: ['email_passwordless'] + valid loginHint	Passwordless flow starts directly — no modal
loginProvider: ['email_passwordless'] without loginHint (or invalid email)	Modal opens as before
Multiple providers (even with loginHint)	Modal opens — the user picks a provider

Email Passwordless — no modal

// Skip the modal: single email_passwordless provider + a known email
const sdk = new Startrail({
  env: 'staging',
  loginProvider: ['email_passwordless'],
  loginHint: '[e-mail]',
})
await sdk.login()

// loginHint can also be passed per-call on login()
await sdk.login({ loginProvider: ['email_passwordless'], loginHint: '[e-mail]' })

loginHint is read from the constructor config or from the login() override. When you pass it to login() together with a single email_passwordless provider, the modal is skipped for that call.

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}