Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
6 changes: 3 additions & 3 deletions delegation-toolkit/get-started/use-the-cli.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,14 @@ The CLI provides the following options to display CLI details, and further custo
| `-v` or `--version` | Check the current version of the `@metamask/create-gator-app` CLI. |
| `-h` or `--help` | Display the available options. |
| `--skip-install` | Skip the installation of dependencies. |
| `--add-web3auth` | Add [Web3Auth Embedded Wallet](https://web3auth.io/docs) as a signer for the delegator account.<br/>Supported templates:<br/>- MetaMask Smart Accounts Starter<br/>- MetaMask Smart Accounts & Delegation Starter |
| `--add-web3auth` | Add [MetaMask Embedded Wallets, prev Web3Auth](https://docs.metamask.io/embedded-wallets) as a signer for the delegator account.<br/>Supported templates:<br/>- MetaMask Smart Accounts Starter<br/>- MetaMask Smart Accounts & Delegation Starter |
| `--add-llm-rules` | Add LLM rules for your IDE. Supported in the Experimental: ERC7715 Permissions Starter template. |

## Examples

### Web3Auth configuration
### MetaMask Embedded Wallets configuration

To create a project that uses [Web3Auth](https://web3auth.io/docs/) Embedded Wallet as the signer for your delegator
To create a project that uses [MetaMask Embedded Wallets](https://docs.metamask.io/embedded-wallets) Embedded Wallet as the signer for your delegator
account, use the `--add-web3auth` option with `@metamask/create-gator-app`:

```bash
Expand Down
26 changes: 13 additions & 13 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const config = {
baseUrl, // overwritten in github action for staging / latest
onBrokenLinks: 'warn',
onBrokenMarkdownLinks: 'warn',
favicon: 'img/favicons/favicon-96x96.png',
favicon: 'https://docs.metamask.io/img/favicons/favicon-96x96.png',

headTags: [
{
Expand All @@ -40,7 +40,7 @@ const config = {
rel: 'icon',
type: 'image/png',
sizes: '96x96',
href: 'img/favicons/favicon-96x96.png',
href: 'https://docs.metamask.io/img/favicons/favicon-96x96.png',
},
},
{
Expand All @@ -49,7 +49,7 @@ const config = {
rel: 'icon',
type: 'image/png',
sizes: '192x192',
href: 'img/favicons/web-app-manifest-192x192.png',
href: 'https://docs.metamask.io/img/favicons/web-app-manifest-192x192.png',
},
},
{
Expand All @@ -58,15 +58,15 @@ const config = {
rel: 'icon',
type: 'image/png',
sizes: '512x512',
href: 'img/favicons/web-app-manifest-512x512.png',
href: 'https://docs.metamask.io/img/favicons/web-app-manifest-512x512.png',
},
},
{
tagName: 'link',
attributes: {
rel: 'apple-touch-icon',
sizes: '180x180',
href: 'img/favicons/apple-touch-icon.png',
href: 'https://docs.metamask.io/img/favicons/apple-touch-icon.png',
},
},
{
Expand All @@ -79,7 +79,7 @@ const config = {
"@context": "https://schema.org",
"@type": "Organization",
"url": "${fullUrl}",
"logo": "${new URL('img/favicons/favicon-96x96.png', fullUrl).toString()}"
"logo": "${new URL('https://docs.metamask.io/img/favicons/favicon-96x96.png', fullUrl).toString()}"
}
`,
},
Expand Down Expand Up @@ -332,7 +332,7 @@ const config = {
},
{
name: 'twitter:image',
content: 'https://docs.metamask.io/img/metamaskog.jpeg',
content: 'https://docs.metamask.io/img/metamaskog.jpg',
},
{
name: 'twitter:image:alt',
Expand All @@ -349,7 +349,7 @@ const config = {
// Open Graph meta tags for better social sharing
{
property: 'og:image',
content: 'https://docs.metamask.io/img/metamaskog.jpeg',
content: 'https://docs.metamask.io/img/metamaskog.jpg',
},
{
property: 'og:image:width',
Expand All @@ -368,15 +368,15 @@ const config = {
content: 'website',
},
],
image: '/img/metamaskog.jpeg',
image: 'https://docs.metamask.io/img/metamaskog.jpg',
colorMode: {
respectPrefersColorScheme: true,
},
navbar: {
logo: {
alt: 'MetaMask logo',
src: 'img/metamask-logo.svg',
srcDark: 'img/metamask-logo-dark.svg',
src: 'https://docs.metamask.io/img/metamask-logo.svg',
srcDark: 'https://docs.metamask.io/img/metamask-logo-dark.svg',
width: 150,
},
hideOnScroll: false,
Expand Down Expand Up @@ -432,8 +432,8 @@ const config = {
footer: {
logo: {
alt: 'MetaMask logo',
src: 'img/metamask-logo.svg',
srcDark: 'img/metamask-logo-dark.svg',
src: 'https://docs.metamask.io/img/metamask-logo.svg',
srcDark: 'https://docs.metamask.io/img/metamask-logo-dark.svg',
href: 'https://metamask.io/',
width: 250,
},
Expand Down
2 changes: 1 addition & 1 deletion embedded-wallets/README.mdx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: What are Embedded Wallets?
image: 'img/docs-meta-cards/documentation-card.png'
image: 'https://docs.metamask.io/img/metamaskog.jpg'
sidebar_label: What are Embedded Wallets?
description: 'What are MetaMask Embedded Wallets? | Documentation - MetaMask Embedded Wallets'
---
Expand Down
2 changes: 1 addition & 1 deletion embedded-wallets/authentication/README.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Authentication
sidebar_label: Overview
image: 'img/docs-meta-cards/documentation-card.png'
image: 'https://docs.metamask.io/img/metamaskog.jpg'
description: 'Authentication | Embedded Wallets'
---

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ sidebar_label: Email Passwordless
description: 'Email Passwordless Login with Embedded Wallets | Embedded Wallets'
---

import EmailPasswordlessToggle from '@site/static/img/w3a-dashboard/email-passwordless-toggle.png'
import EmailPasswordlessAddConnection from '@site/static/img/w3a-dashboard/email-passwordless-add-connection.png'
import EmailPasswordlessOnboarding from '@site/static/img/w3a-dashboard/email-passwordless-onboarding.gif'
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'

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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ sidebar_label: External Wallets
description: 'External Wallets Login with Embedded Wallets | Embedded Wallets'
---

import ExternalWalletsToggle from '@site/static/img/w3a-dashboard/external-wallets-toggle.png'
import ExternalWalletsSelectWallets from '@site/static/img/w3a-dashboard/external-wallets-select-wallets.png'
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'

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.

Expand Down
6 changes: 3 additions & 3 deletions embedded-wallets/authentication/basic-logins/sms-otp.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ sidebar_label: SMS OTP
description: 'SMS OTP Login with Embedded Wallets | Embedded Wallets'
---

import SMSOTPToggle from '@site/static/img/w3a-dashboard/sms-otp-toggle.png'
import SMSOTPAddConnection from '@site/static/img/w3a-dashboard/sms-otp-add-connection.png'
import SMSOTPOnboarding from '@site/static/img/w3a-dashboard/email-passwordless-onboarding.gif'
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'

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.

Expand Down
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/w3a-dashboard/authentication-custom-connections.png'
import Auth0Connection from '@site/static/img/w3a-dashboard/auth0-connection.png'
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 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 Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ sidebar_label: AWS Cognito
description: 'AWS Cognito Login with Embedded Wallets | Embedded Wallets'
---

import CustomConnectionOptions from '@site/static/img/w3a-dashboard/authentication-custom-connections.png'
import AWSConnection from '@site/static/img/w3a-dashboard/aws-cognito-connection.png'
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 ImplicitLoginCognito from '../../sdk/react/advanced/_custom-authentication-snippets/_implicit_login_aws_cognito.mdx'

AWS 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. Web3Auth supports AWS Cognito as a service provider, allowing seamless integration between AWS Cognito’s authentication capabilities and Web3Auth’s decentralized key management infrastructure.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@
title: Custom JWT Login with Embedded Wallets
sidebar_label: Custom JWT
description: 'Custom JWT Login with Embedded Wallets | Embedded Wallets'
image: 'img/docs-meta-cards/documentation-card.png'
image: 'https://docs.metamask.io/img/metamaskog.jpg'
---

import TabItem from '@theme/TabItem'
import Tabs from '@theme/Tabs'

import CustomConnectionOptions from '@site/static/img/w3a-dashboard/authentication-custom-connections.png'
import CustomJWTConnection from '@site/static/img/w3a-dashboard/custom-connection.png'
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 JwtLoginCustom from '../../sdk/react/advanced/_custom-authentication-snippets/_jwt_login_custom.mdx'

Web3Auth supports integration with custom login providers through JWT-based 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 Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ description: 'Firebase Login with Embedded Wallets | Embedded Wallets'

import Tiles from '@theme/Tiles'

import CustomConnectionOptions from '@site/static/img/w3a-dashboard/authentication-custom-connections.png'
import FirebaseConnection from '@site/static/img/w3a-dashboard/firebase-connection.png'
import CustomConnectionOptions from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-custom-connections.png'
import FirebaseConnection from '@site/static/img/embedded-wallets/w3a-dashboard/firebase-connection.png'
import JwtLoginFirebase from '../../sdk/react/advanced/_custom-authentication-snippets/_jwt_login_firebase.mdx'

Firebase is a popular backend platform that enables developers to seamlessly integrate authentication, databases, and other services into their applications. Web3Auth supports Firebase as an authentication provider, allowing developers to leverage Firebase Authentication within the Web3Auth framework for secure user login and key management.
Expand Down
8 changes: 4 additions & 4 deletions embedded-wallets/authentication/group-connections.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
title: Group Connections
sidebar_label: Group Connections
description: 'Group Connections | Embedded Wallets'
image: 'img/docs-meta-cards/documentation-card.png'
image: 'https://docs.metamask.io/img/metamaskog.jpg'
---

import AuthenticationGroupConnectionsSelect from '@site/static/img/w3a-dashboard/authentication-group-connections-select.png'
import AuthenticationGroupConnectionsCreate from '@site/static/img/w3a-dashboard/authentication-group-connections-create.png'
import AuthenticationGroupConnectionsConfirm from '@site/static/img/w3a-dashboard/authentication-group-connections-confirm.png'
import AuthenticationGroupConnectionsSelect from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-group-connections-select.png'
import AuthenticationGroupConnectionsCreate from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-group-connections-create.png'
import AuthenticationGroupConnectionsConfirm from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-group-connections-confirm.png'

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
Expand Down
2 changes: 1 addition & 1 deletion embedded-wallets/authentication/id-token.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Web3Auth Identity Token
sidebar_label: Web3Auth Identity Token
image: 'img/docs-meta-cards/documentation-card.png'
image: 'https://docs.metamask.io/img/metamaskog.jpg'
description: 'Identity Token | Embedded Wallets'
---

Expand Down
8 changes: 4 additions & 4 deletions embedded-wallets/authentication/social-logins/discord.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ sidebar_label: Discord
description: 'Discord Social Login with Embedded Wallets | Embedded Wallets'
---

import DiscordToggle from '@site/static/img/w3a-dashboard/authentication-social-connections.png'
import DiscordConnection from '@site/static/img/w3a-dashboard/discord-connection.png'
import DiscordToggle from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-social-connections.png'
import DiscordConnection from '@site/static/img/embedded-wallets/w3a-dashboard/discord-connection.png'

Discord Login is a social login provider that allows users to sign in using their Discord credentials. Web3Auth supports Discord as a social login provider, allowing developers to offer a familiar and quick authentication method for users with Discord accounts.

Expand All @@ -18,13 +18,13 @@ To integrate Discord with Web3Auth, developers must first create a Discord App v
2. Navigate to **OAuth2** from the sidebar, and paste the following as Redirect URI into the "Redirect URI" field.
- https://auth.web3auth.io/auth

![Discord OAuth2.0 App Dashboard](/img/authentication/discord/discord-redirect-uri.png)
![Discord OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/discord/discord-redirect-uri.png)

3. Don't forget to save your changes!

4. Next, obtain the **"Client ID"** from here. We will use this in our Embedded Wallets Dashboard.

![Discord OAuth2.0 App Client ID and Secret](/img/authentication/discord/discord-clientid-secret.png)
![Discord OAuth2.0 App Client ID and Secret](/img/embedded-wallets/authentication/discord/discord-clientid-secret.png)

## Create a Discord Connection

Expand Down
12 changes: 6 additions & 6 deletions embedded-wallets/authentication/social-logins/facebook.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ sidebar_label: Facebook
description: 'Facebook Social Login with Embedded Wallets | Embedded Wallets'
---

import FacebookToggle from '@site/static/img/w3a-dashboard/authentication-social-connections.png'
import FacebookConnection from '@site/static/img/w3a-dashboard/facebook-connection.png'
import FacebookToggle from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-social-connections.png'
import FacebookConnection from '@site/static/img/embedded-wallets/w3a-dashboard/facebook-connection.png'
import ImplicitLoginFacebook from '../../sdk/react/advanced/_custom-authentication-snippets/_implicit_login_facebook.mdx'

Facebook Login enables users to sign in using their Facebook credentials. Web3Auth supports Facebook as a social login provider, allowing developers to offer a familiar and quick authentication method for users with Facebook accounts.
Expand All @@ -15,20 +15,20 @@ To integrate Facebook with Web3Auth, developers must first create a Facebook App
## Create a Facebook app

1. Follow Facebook's instructions to [create a new app](https://developers.facebook.com/docs/development/create-an-app).
2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login. ![Facebook OAuth2.0 App Dashboard](/img/authentication/facebook/facebook-app.png)
2. When creating an app, make sure to select `Consumer` from this screen to use Facebook Login. ![Facebook OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/facebook/facebook-app.png)

3. On the next screen, you'll be presented with different products you can integrate into your Facebook app. Click **"Set Up"** in the card representing the **Facebook Login** capability.

![Facebook OAuth2.0 App Dashboard](/img/authentication/facebook/facebook-login-setup.png)
![Facebook OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/facebook/facebook-login-setup.png)

4. Paste the following as a redirect URI into the "Valid OAuth Redirect URIs" field.
- https://auth.web3auth.io/auth

![Facebook OAuth2.0 App Dashboard](/img/authentication/facebook/facebook-login-settings-oauth.png)
![Facebook OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/facebook/facebook-login-settings-oauth.png)

5. Obtain the "App ID" and "App Secret" from the **Settings > Basic** screen.

![Facebook OAuth2.0 App Dashboard](/img/authentication/facebook/facebook-app-id-secret.png)
![Facebook OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/facebook/facebook-app-id-secret.png)

## Create a Facebook Connection

Expand Down
6 changes: 3 additions & 3 deletions embedded-wallets/authentication/social-logins/google.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ description: 'Google Login with Embedded Wallets | Embedded Wallets'

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import GoogleToggle from '@site/static/img/w3a-dashboard/authentication-social-connections.png'
import GoogleConnection from '@site/static/img/w3a-dashboard/google-connection.png'
import GoogleToggle from '@site/static/img/embedded-wallets/w3a-dashboard/authentication-social-connections.png'
import GoogleConnection from '@site/static/img/embedded-wallets/w3a-dashboard/google-connection.png'

import JwtLoginGoogle from '../../sdk/react/advanced/_custom-authentication-snippets/_jwt_login_google_one_tap.mdx'
import ImplicitLoginGoogle from '../../sdk/react/advanced/_custom-authentication-snippets/_implicit_login_google.mdx'
Expand All @@ -22,7 +22,7 @@ To integrate Google Sign-In with Web3Auth, developers must first configure a Goo
2. Paste the following URI as a redirect URI into the "Authorized redirect URIs" field.
- `https://auth.web3auth.io/auth`

![Google OAuth2.0 App Dashboard](/img/authentication/google/google-app-redirect-uri.png)
![Google OAuth2.0 App Dashboard](/img/embedded-wallets/authentication/google/google-app-redirect-uri.png)

3. Obtain the OAuth `Client ID` from the [App on the Google Developer dashboard](https://console.developers.google.com/)

Expand Down
Loading
Loading