# Interface

## Common UI

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

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><h3>Login/Signup modal</h3></td><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FLkDdZNH3WKNNWBxeBru4%2FScreenshot%202023-07-07%20at%2020.17.13.png?alt=media&#x26;token=6289e236-fe34-479b-a8d2-43c0c156f99d" alt=""></td><td></td></tr><tr><td>When it's used ?</td><td><ul><li><code>sdk.login({isModal: true}) is called.</code></li></ul><p></p><p>This modal is not activated as default</p></td><td><ul><li>If you hide modal, you may want to put Terms of Service and its link on your application. </li><li>It's not possible to remove [View more options] dropdown.</li><li><p>The order of icons is arranged based on the order of  the values in <code>loginProvider</code> array except Google, Email Password and Email Passwordless. </p><ul><li>For example, <code>loginProvider: ["google", "apple", "line"]</code> allocates the order from Google on the top followed by Apple and LINE underneath. </li></ul></li></ul></td></tr></tbody></table>

### Expected Parameters and Result with example case of google & line

<table><thead><tr><th width="175">withModal</th><th>[’google’]</th><th>[’google’,’line’]</th><th>undefined</th></tr></thead><tbody><tr><td>true</td><td>Modal: <code>google</code></td><td>Modal: <code>google</code>, <code>line</code></td><td>Modal: ALL</td></tr><tr><td>false</td><td>Direct Login without modal</td><td><code>Google</code> Login without modal</td><td><code>Google</code> Login without modal</td></tr><tr><td>undefined</td><td>Direct Login without modal</td><td>Modal: <code>google</code>, <code>line</code></td><td>Modal: ALL</td></tr></tbody></table>

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><h3>Signature Modal</h3></td><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2Fa6QXra551dbAqkMetB5k%2FScreenshot%202022-03-08%20at%2019.28.20.png?alt=media&#x26;token=ccb56fe8-a509-4ea4-a335-13d7116c6a8a" alt=""></td><td></td></tr><tr><td></td><td>When it's used ?</td><td><ul><li><code>sdk.signMessage is called</code></li></ul><p>As default, <code>signMessage() is executed with an arbitrary string prepended to the message under the hood of Web3Auth library.</code></p><p><code>This enables skipping the signature modal popup and user consent process. The drawback of this is to require additional backend development. See more details.</code></p><p><a href="../authentication-integration">Required implementation on clients’ backend</a><br><br>Web3Auth</p><p><a href="https://docs.tor.us/wallet/api-reference/installation">Installation | Documentation</a></p></td></tr></tbody></table>

### UI Samples with combination of parameters

<table data-view="cards" data-full-width="true"><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FculSoHpgD5bCUQEvaUOM%2FScreenshot%202021-08-13%20at%2019.30.46.png?alt=media&#x26;token=4df20f4d-aa81-455e-8384-d10f1c0811d5" alt=""></td><td>{<code>loginProvider: ['email_password'], authAction: { login: true, signup: false }, withModal: true}</code></td><td></td></tr><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FAJFw41zzYASDXV2K9Jyx%2FScreenshot%202021-08-13%20at%2019.31.03.png?alt=media&#x26;token=df72ea3a-8f7b-49eb-8864-8f61683cb410" alt=""></td><td>{<code>loginProvider: ['email_password'], authAction: { login: false, signup: true }, withModal: true}</code></td><td></td></tr><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FOFhfyBteUVqgL9iuU1Fp%2FScreenshot%202021-08-13%20at%2019.32.43.png?alt=media&#x26;token=3c268eca-d85f-4540-82b0-022f3a483cc9" alt=""></td><td><code>{</code>authAction: { login: false, signup: true },<code>loginProvider: ['google', 'email_password'],</code>withModal: true<code>}</code></td><td></td></tr><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2F0Xp1Jet9hF2pYWLytC19%2FScreenshot%202021-08-13%20at%2019.33.54.png?alt=media&#x26;token=6ce541be-ae02-4ce3-afd5-c18b95e317f5" alt=""></td><td><code>{</code>authAction: { login: true, signup: falsse },<code>loginProvider: ['google', 'email_password'],</code>withModal: true<code>}</code></td><td></td></tr><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2F2FmtBqoFidyizAopcu32%2FScreenshot%202021-08-18%20at%200.26.39.png?alt=media&#x26;token=fba86cce-1095-4ae7-9c80-ecb5e567de59" alt=""></td><td><code>{customUI: { words: { ja: { modal: { termsConditions: 'アカウント登録に伴い、Startbahn Port のプライバシーポリシーを含む、利用規約に同意します', termsConditionsLinkUrl: '</code><a href="https://google.com/"><code>https://google.com</code></a><code>' } }, withModal: true,</code>authAction: { login: true, signup: false },<code>loginProvider: [ 'google']}</code></td><td></td></tr><tr><td><img src="https://3244648189-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOu6aN3RW264zdJsOQMJ2%2Fuploads%2FXSmlo6uMAjAaRn5mZa8M%2FScreenshot%202023-07-07%20at%2023.49.27.png?alt=media&#x26;token=1ee025af-976e-44aa-953c-9e77389043c0" alt=""></td><td>{<code>loginProvider: ['google', 'line', 'twitter', 'email_passwordless'], authAction: { login: true, signup: false }, withModal: true}</code></td><td></td></tr></tbody></table>