Skip to content

EW Dashboard Migration #2910

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yashovardhan merged 8 commits into from
May 12, 2026
Merged

EW Dashboard Migration #2910

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8463fee
Update dashboard
yashovardhan May 10, 2026
2ed2149
Update image sizes
yashovardhan May 10, 2026
5b5803b
delete extra images
yashovardhan May 10, 2026
effc806
Merge branch 'main' into ew-dashboard
yashovardhan May 11, 2026
51a3640
Update smart-accounts.mdx
yashovardhan May 11, 2026
6a3f599
Merge branch 'main' into ew-dashboard
yashovardhan May 12, 2026
c34dc0b
Merge branch 'main' into ew-dashboard
yashovardhan May 12, 2026
e2f9a48
fix vale issues
yashovardhan May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 12 additions & 39 deletions embedded-wallets/authentication/basic-logins/email-passwordless.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,39 @@ sidebar_label: Email passwordless
description: 'Email Passwordless Login with Embedded Wallets | Embedded Wallets'
---

import EmailPasswordlessToggle from '@site/static/img/embedded-wallets/w3a-dashboard/email-passwordless-toggle.png'
import EmailPasswordlessAddConnection from '@site/static/img/embedded-wallets/w3a-dashboard/email-passwordless-add-connection.png'
import EmailPasswordlessOnboarding from '@site/static/img/embedded-wallets/w3a-dashboard/email-passwordless-onboarding.gif'
import EmailPasswordlessToggle from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-toggle.png'
import EmailPasswordlessAddConnection from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-add-connection.png'
import EmailPasswordlessOnboarding from '@site/static/img/embedded-wallets/dev-dashboard/email-passwordless-onboarding.png'

Embedded Wallets provides built-in support for email and SMS-based authentication, allowing users to log in seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of passwordless authentication simplifies the onboarding process, removes friction for end users, and expands accessibility—especially in regions where social login options may be limited.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={EmailPasswordlessOnboarding}
alt="Email Passwordless Onboarding"
style={{
maxWidth: '600px',
border: '1px solid #eaeaea',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
/>
</div>
<img className="docImg" src={EmailPasswordlessOnboarding} alt="Email Passwordless Onboarding" />

## Set up a custom email connection

:::success Enable on dashboard

To use this feature, developers must first enable **Email Passwordless** from the Social Connections section in the [dashboard](https://dashboard.web3auth.io).
To use this feature, developers must first enable **Email Passwordless** from the Social Connections section in the [dashboard](https://developer.metamask.io).

By default, Web3Auth uses its own pre-configured credentials for email login.

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={EmailPasswordlessToggle}
alt="Email Passwordless Toggle"
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
/>
</div>
<img className="docImg" src={EmailPasswordlessToggle} alt="Email Passwordless Toggle" />

For enhanced control and branding, developers are encouraged to configure a custom email connection. Follow these steps:

1. Visit the [dashboard](https://dashboard.web3auth.io).
1. Visit the [dashboard](https://developer.metamask.io).
2. Navigate to the **Social Connections** section.
3. Click the **Settings** icon (next to the toggle for **Email Passwordless**.
4. Enter your custom `Auth Connection ID`.
5. Click **Add Connection** to complete the setup.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={EmailPasswordlessAddConnection}
alt="Email Passwordless Add Connection"
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
/>
</div>
<img
className="docImg"
src={EmailPasswordlessAddConnection}
alt="Email Passwordless Add Connection"
/>

## Usage

Expand Down
28 changes: 6 additions & 22 deletions embedded-wallets/authentication/basic-logins/external-wallets.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,22 @@ sidebar_label: External wallets
description: 'External Wallets Login with Embedded Wallets | Embedded Wallets'
---

import ExternalWalletsToggle from '@site/static/img/embedded-wallets/w3a-dashboard/external-wallets-toggle.png'
import ExternalWalletsSelectWallets from '@site/static/img/embedded-wallets/w3a-dashboard/external-wallets-select-wallets.png'
import ExternalWalletsToggle from '@site/static/img/embedded-wallets/dev-dashboard/external-wallets-toggle.png'
import ExternalWalletsSelectWallets from '@site/static/img/embedded-wallets/dev-dashboard/external-wallets-select-wallets.png'

Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of passwordless authentication simplifies the onboarding process, removes friction for end users, and expands accessibility—especially in regions where social login options may be limited.

## Enable external wallets

:::success Enable on dashboard

To enable this feature, developers must first activate **External Wallets** from the **Social Connections** section in the [dashboard](https://dashboard.web3auth.io).
To enable this feature, developers must first activate **External Wallets** from the **Social Connections** section in the [dashboard](https://developer.metamask.io).

:::

<div style={{ display: 'flex', margin: '20px 0' }}>
<img
src={ExternalWalletsToggle}
alt="External Wallets Toggle"
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
/>
</div>
<img className="docImg" src={ExternalWalletsToggle} alt="External Wallets Toggle" />

To choose which external wallets to enable, click the **Settings** icon next to the **External Wallets** toggle in the Social Connections section of the [dashboard](https://dashboard.web3auth.io).
To choose which external wallets to enable, click the **Settings** icon next to the **External Wallets** toggle in the Social Connections section of the [dashboard](https://developer.metamask.io).

:::note

Expand All @@ -39,10 +29,4 @@ MetamMask Wallet is enabled by default and cannot be disabled.

A wide range of wallets are available to choose from.

<div style={{ display: 'flex', margin: '20px 0' }}>
<img
src={ExternalWalletsSelectWallets}
style={{ alignSelf: 'center', maxWidth: '100%' }}
alt="External Wallets Select Wallets"
/>
</div>
<img className="docImg" src={ExternalWalletsSelectWallets} alt="External Wallets Select Wallets" />
46 changes: 8 additions & 38 deletions embedded-wallets/authentication/basic-logins/sms-otp.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,35 @@ sidebar_label: SMS OTP
description: 'SMS OTP Login with Embedded Wallets | Embedded Wallets'
---

import SMSOTPToggle from '@site/static/img/embedded-wallets/w3a-dashboard/sms-otp-toggle.png'
import SMSOTPAddConnection from '@site/static/img/embedded-wallets/w3a-dashboard/sms-otp-add-connection.png'
import SMSOTPOnboarding from '@site/static/img/embedded-wallets/w3a-dashboard/email-passwordless-onboarding.gif'
import SMSOTPToggle from '@site/static/img/embedded-wallets/dev-dashboard/sms-otp-toggle.png'
import SMSOTPAddConnection from '@site/static/img/embedded-wallets/dev-dashboard/sms-otp-add-connection.png'
import SMSOTPOnboarding from '@site/static/img/embedded-wallets/dev-dashboard/sms-otp-onboarding.png'

Web3Auth provides built-in support for email and SMS-based authentication, allowing users to log in seamlessly using a one-time passcode (OTP) sent to their email address or phone number. This form of passwordless authentication simplifies the onboarding process, removes friction for end users, and expands accessibility—especially in regions where social login options may be limited.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={SMSOTPOnboarding}
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="SMS OTP Onboarding"
/>
</div>
<img className="docImg" src={SMSOTPOnboarding} alt="SMS OTP Onboarding" />

## Set up a custom SMS OTP connection

:::success Enable on dashboard

To use this feature, developers must first enable **SMS OTP** from the **Social Connections** section in the [dashboard](https://dashboard.web3auth.io).
To use this feature, developers must first enable **SMS OTP** from the **Social Connections** section in the [dashboard](https://developer.metamask.io).

By default, Web3Auth uses its own pre-configured credentials for SMS OTP login.

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={SMSOTPToggle}
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="SMS OTP Toggle"
/>
</div>
<img className="docImg" src={SMSOTPToggle} alt="SMS OTP Toggle" />

For enhanced control and branding, developers are encouraged to configure a custom SMS OTP connection. Follow these steps:

1. Visit the [dashboard](https://dashboard.web3auth.io).
1. Visit the [dashboard](https://developer.metamask.io).
2. Go to the **Social Connections** section.
3. Click the **Settings** icon next to the toggle for **SMS OTP**.
4. Enter your custom `Auth Connection ID`.
5. Click **Add Connection** to complete the setup.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={SMSOTPAddConnection}
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="SMS OTP Add Connection"
/>
</div>
<img className="docImg" src={SMSOTPAddConnection} alt="SMS OTP Add Connection" />

## Usage

Expand Down
36 changes: 8 additions & 28 deletions embedded-wallets/authentication/custom-connections/auth0.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import Tiles from '@theme/Tiles'

import CustomConnectionOptions from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-custom-connections.png'
import Auth0Connection from '@site/static/img/embedded-wallets/w3a-dashboard/auth0-connection.png'
import CustomConnectionOptions from '@site/static/img/embedded-wallets/dev-dashboard/authentication-custom-connections.png'
import Auth0Connection from '@site/static/img/embedded-wallets/dev-dashboard/auth0-connection.png'

import JwtLoginAuth0 from '../../sdk/react/advanced/_custom-authentication-snippets/_jwt_login_auth0.mdx'
import ImplicitLoginAuth0Google from '../../sdk/react/advanced/_custom-authentication-snippets/_implicit_login_auth0_google.mdx'
Expand All @@ -21,7 +21,7 @@ Auth0 supports a [wide set of social logins](https://marketplace.auth0.com/categ

## Create an Auth0 application

To begin, developers must first create an Auth0 application specific to their project. This initial setup is essential before configuring the connection with Web3Auth. Once the Auth0 application is created, developers can proceed to establish an Auth0 connection within the [dashboard](https://dashboard.web3auth.io).
To begin, developers must first create an Auth0 application specific to their project. This initial setup is essential before configuring the connection with Web3Auth. Once the Auth0 application is created, developers can proceed to establish an Auth0 connection within the [dashboard](https://developer.metamask.io).

This integration allows users to authenticate through Auth0, while still benefiting from Web3Auth's key management and wallet abstraction features. For platform-specific implementation details or additional customization, developers are encouraged to refer to the [official Auth0 documentation](https://auth0.com/docs/quickstart/native#webapp).

Expand Down Expand Up @@ -70,25 +70,15 @@ export const Auth0Setup = [

:::success Connect Auth0

To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://dashboard.web3auth.io).
To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://developer.metamask.io).

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={CustomConnectionOptions}
style={{
maxWidth: '800px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="Custom Connection Options"
/>
</div>
<img className="docImg" src={CustomConnectionOptions} alt="Custom Connection Options" />

Follow these steps to create an Auth0 connection:

1. Visit the [dashboard](https://dashboard.web3auth.io).
1. Visit the [dashboard](https://developer.metamask.io).
2. Go to the **Custom Connections** section.
3. Click on the **Settings** icon near the Auth0 connection.
4. Enter the `Auth Connection ID`.
Expand All @@ -98,17 +88,7 @@ Follow these steps to create an Auth0 connection:
8. Enter `Auth0 Domain`.
9. Click on the **Add Connection** button to save the settings.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={Auth0Connection}
style={{
maxWidth: '800px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="Auth0 Connection"
/>
</div>
<img className="docImg" src={Auth0Connection} alt="Auth0 Connection" />

## Usage

Expand Down Expand Up @@ -208,7 +188,7 @@ Future<void> initPlatformState() async {
// focus-start
final loginConfig = HashMap<String, LoginConfigItem>();
loginConfig['jwt'] = LoginConfigItem(
verifier: "VERIFIER-NAME", // get it from web3auth dashboard
verifier: "VERIFIER-NAME", // get it from MetaMask Developer Dashboard
typeOfLogin: TypeOfLogin.jwt,
name: "Web3Auth Flutter Auth0 Example",
clientId: "AUTH0-CLIENT-ID" // auth0 client id
Expand Down
32 changes: 6 additions & 26 deletions embedded-wallets/authentication/custom-connections/aws-cognito.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
description: 'AWS Cognito Login with Embedded Wallets | Embedded Wallets'
---

import CustomConnectionOptions from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-custom-connections.png'
import AWSConnection from '@site/static/img/embedded-wallets/w3a-dashboard/aws-cognito-connection.png'
import CustomConnectionOptions from '@site/static/img/embedded-wallets/dev-dashboard/authentication-custom-connections.png'
import AWSConnection from '@site/static/img/embedded-wallets/dev-dashboard/aws-cognito-connection.png'
import ImplicitLoginCognito from '../../sdk/react/advanced/_custom-authentication-snippets/_implicit_login_aws_cognito.mdx'

[AWS Cognito](https://aws.amazon.com/cognito/) is a scalable authentication service provided by Amazon Web Services that enables developers to securely manage user sign-up, sign-in, and access control. Embedded Wallets supports AWS Cognito as a service provider, allowing seamless integration between AWS Cognito's authentication capabilities and Embedded Wallets's decentralized key management infrastructure.
Expand All @@ -24,25 +24,15 @@

:::success Create AWS Cognito Connection

To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://dashboard.web3auth.io).
To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://developer.metamask.io).

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={CustomConnectionOptions}
style={{
maxWidth: '800px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="Custom Connection Options"
/>
</div>
<img className="docImg" src={CustomConnectionOptions} alt="Custom Connection Options" />

Follow these steps to create a AWS Cognito connection:

1. Visit the [dashboard](https://dashboard.web3auth.io).
1. Visit the [dashboard](https://developer.metamask.io).
1. Go to the **Custom Connections** section.
1. Click on the **Settings** icon near the **AWS Cognito** connection.
1. Enter the **Cognito Connection ID**.
Expand All @@ -61,17 +51,7 @@

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={AWSConnection}
style={{
maxWidth: '800px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="AWS Cognito Connection"
/>
</div>
<img className="docImg" src={AWSConnection} alt="AWS Cognito Connection" />

Check warning on line 54 in embedded-wallets/authentication/custom-connections/aws-cognito.mdx

View workflow job for this annotation

GitHub Actions / Spelling (.mdx) 

[vale] reported by reviewdog 🐶
[Consensys.Spelling] Did you really mean 'Cognito'? Ignore this alert if this is a false positive, or ask Cursor to add the term to the Vale dictionary.

Raw Output:
{"message": "[Consensys.Spelling] Did you really mean 'Cognito'? Ignore this alert if this is a false positive, or ask Cursor to add the term to the Vale dictionary.", "location": {"path": "embedded-wallets/authentication/custom-connections/aws-cognito.mdx", "range": {"start": {"line": 54, "column": 54}}}, "severity": "WARNING"}

## Usage

Expand Down
32 changes: 6 additions & 26 deletions embedded-wallets/authentication/custom-connections/custom-jwt.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ image: 'img/metamaskog.jpg'
import TabItem from '@theme/TabItem'
import Tabs from '@theme/Tabs'

import CustomConnectionOptions from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-custom-connections.png'
import CustomJWTConnection from '@site/static/img/embedded-wallets/w3a-dashboard/custom-connection.png'
import CustomConnectionOptions from '@site/static/img/embedded-wallets/dev-dashboard/authentication-custom-connections.png'
import CustomJWTConnection from '@site/static/img/embedded-wallets/dev-dashboard/custom-connection.png'
import JwtLoginCustom from '../../sdk/react/advanced/_custom-authentication-snippets/_jwt_login_custom.mdx'

Embedded Wallets supports integration with custom login providers through [JWT-based](https://www.jwt.io/introduction#what-is-json-web-token) authentication schemes, allowing developers to maintain their existing authentication infrastructure while leveraging Web3Auth's wallet and key management capabilities. Custom authentication can be implemented using industry-standard cryptographic algorithms such as RSA or ECDSA signatures.
Expand All @@ -22,25 +22,15 @@ Once the custom JWT login is working, developers can proceed to add it as a cust

:::success Create Custom Connection

To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://dashboard.web3auth.io).
To use this feature, developers must go to the **Custom Connections** tab in the [dashboard](https://developer.metamask.io).

:::

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={CustomConnectionOptions}
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="Custom Connection Options"
/>
</div>
<img className="docImg" src={CustomConnectionOptions} alt="Custom Connection Options" />

Follow these steps to create a custom JWT connection:

1. Visit the [Embedded Wallets dashboard](https://dashboard.web3auth.io).
1. Visit the [Embedded Wallets dashboard](https://developer.metamask.io).
1. Go to the **Custom Connections** section.
1. Click on the **Settings** icon near the **Custom Connection**.
1. Enter the **Auth Connection ID**.
Expand All @@ -53,17 +43,7 @@ Follow these steps to create a custom JWT connection:
1. Type aud as a field and `your-audience` as a value.
1. Click the **Add Connection** button to save the settings.

<div style={{ display: 'flex', margin: '20px 0', justifyContent: 'center' }}>
<img
src={CustomJWTConnection}
style={{
maxWidth: '600px',
borderRadius: '8px',
boxShadow: '0 2px 6px rgba(0, 0, 0, 0.1)',
}}
alt="Custom JWT Connection"
/>
</div>
<img className="docImg" src={CustomJWTConnection} alt="Custom JWT Connection" />

## Create a JWT

Expand Down
Loading
Loading