Skip to content

Commit 41f8da9

Browse files
yashovardhanyashovardhan
committed
Update auth code snippets
1 parent 0a5176e commit 41f8da9

File tree

16 files changed

+220
-359
lines changed

16 files changed

+220
-359
lines changed

‎docs/authentication/advanced/id-token.mdx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
---
2-
title: ID Token
3-
sidebar_label: ID Token
2+
title: Web3AuthIdentity Token
3+
sidebar_label: Identity Token
44
image: "images/docs-meta-cards/documentation-card.png"
5-
description: "ID Token | Documentation - Web3Auth"
5+
description: "Identity Token | Documentation - Web3Auth"
66
---
77

88
import TabItem from "@theme/TabItem";
@@ -75,20 +75,20 @@ omitted from the token.
7575

7676
## Getting the ID Token
7777

78-
To retrieve the ID token on the client-side, use the `authenticateUser()` method. This is typically
78+
To retrieve the ID token on the client-side, use the `getIdentityToken()` method. This is typically
7979
called after the user logs in.
8080

8181
**Inside React context**:
8282

8383
```js
84-
const { authenticateUser } = useIdentityToken();
85-
const idToken = await authenticateUser();
84+
const { getIdentityToken } = useIdentityToken();
85+
const idToken = await getIdentityToken();
8686
```
8787

8888
**Outside React context**:
8989

9090
```js
91-
await web3auth.authenticateUser();
91+
await web3auth.getIdentityToken();
9292
```
9393

9494
## Verifying the ID Token

‎docs/authentication/advanced/mfa.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Multi-Factor Authentication
3-
sidebar_label: MFA
3+
sidebar_label: Multi-Factor Authentication
44
image: "images/docs-meta-cards/documentation-card.png"
55
description: "Multi-Factor Authentication | Documentation - Web3Auth"
66
---

‎docs/authentication/basic-logins/email-passwordless.mdx‎

Lines changed: 43 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,15 @@ expands accessibility—especially in regions where social login options may be
1818
To use this feature, developers must first enable `Email Passwordless` from the Social Connections
1919
section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
2020

21-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
21+
<div style={{ display: "flex", margin: "20px 0" }}>
2222
<img
2323
src={EmailPasswordlessToggle}
24-
style={{ alignSelf: "center", maxWidth: "100%" }}
2524
alt="Email Passwordless Toggle"
25+
style={{
26+
maxWidth: "600px",
27+
borderRadius: "8px",
28+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
29+
}}
2630
/>
2731
</div>
2832

@@ -41,68 +45,60 @@ Follow these steps:
4145
4. Enter your custom `Auth Connection ID`.
4246
5. Click `Add Connection` to complete the setup.
4347

44-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
48+
<div style={{ display: "flex", margin: "20px 0" }}>
4549
<img
4650
src={EmailPasswordlessAddConnection}
47-
style={{ alignSelf: "center", maxWidth: "100%" }}
4851
alt="Email Passwordless Add Connection"
52+
style={{
53+
maxWidth: "600px",
54+
borderRadius: "8px",
55+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
56+
}}
4957
/>
5058
</div>
5159

5260
## Usage
5361

54-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
62+
<div style={{ display: "flex", margin: "20px 0" }}>
5563
<img
5664
src={EmailPasswordlessOnboarding}
57-
style={{ alignSelf: "center", maxWidth: "100%" }}
5865
alt="Email Passwordless Onboarding"
66+
style={{
67+
maxWidth: "600px",
68+
border: "1px solid #eaeaea",
69+
borderRadius: "8px",
70+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
71+
}}
5972
/>
6073
</div>
6174

62-
```js title="Example: React + Vite (main.tsx)"
63-
import { StrictMode } from "react";
64-
import { createRoot } from "react-dom/client";
65-
import "./index.css";
66-
67-
import {
68-
Web3AuthProvider,
69-
WALLET_CONNECTORS,
70-
AUTH_CONNECTION,
71-
WEB3AUTH_NETWORK,
72-
} from "@web3auth/modal/react";
73-
74-
import App from "./App.tsx";
75-
76-
createRoot(document.getElementById("root")!).render(
77-
<StrictMode>
78-
<Web3AuthProvider
79-
config={{
80-
web3AuthOptions: {
81-
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
82-
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
83-
modalConfig: {
84-
connectors: {
85-
[WALLET_CONNECTORS.AUTH]: {
86-
label: "auth",
87-
loginMethods: {
88-
// highlight-start
89-
email_passwordless: {
90-
name: "Email Passwordless",
91-
authConnection: AUTH_CONNECTION.EMAIL_PASSWORDLESS,
92-
authConnectionId: "ep-test-demo", // Replace with your custom Email Auth Connection ID
93-
},
94-
// highlight-end
95-
},
96-
},
75+
```tsx title="web3authContext.tsx"
76+
import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
77+
import { type Web3AuthContextConfig } from "@web3auth/modal/react";
78+
79+
const web3AuthContextConfig: Web3AuthContextConfig = {
80+
web3AuthOptions: {
81+
clientId: "YOUR_CLIENT_ID",
82+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
83+
modalConfig: {
84+
connectors: {
85+
[WALLET_CONNECTORS.AUTH]: {
86+
label: "auth",
87+
// focus-start
88+
loginMethods: {
89+
email_passwordless: {
90+
name: "email passwordless login",
91+
authConnectionId: "w3a-email_passwordless-demo",
9792
},
9893
},
94+
// focus-end
9995
},
100-
}}
101-
>
102-
<App />
103-
</Web3AuthProvider>
104-
</StrictMode>
105-
);
96+
},
97+
},
98+
},
99+
};
100+
101+
export default web3AuthContextConfig;
106102
```
107103

108104
Follow our [Quickstart Guide](/quick-start) to setup the basic flow.

‎docs/authentication/basic-logins/external-wallets.mdx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,15 @@ expands accessibility—especially in regions where social login options may be
1717
To enable this feature, developers must first activate `External Wallets` from the Social
1818
Connections section in the [Web3Auth Dashboard](https://dashboard.web3auth.io).
1919

20-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
20+
<div style={{ display: "flex", margin: "20px 0" }}>
2121
<img
2222
src={ExternalWalletsToggle}
23-
style={{ alignSelf: "center", maxWidth: "100%" }}
2423
alt="External Wallets Toggle"
24+
style={{
25+
maxWidth: "600px",
26+
borderRadius: "8px",
27+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
28+
}}
2529
/>
2630
</div>
2731

@@ -35,7 +39,7 @@ Wallets** toggle in the Social Connections section of the
3539

3640
A wide range of wallets are available to choose from.
3741

38-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
42+
<div style={{ display: "flex", margin: "20px 0" }}>
3943
<img
4044
src={ExternalWalletsSelectWallets}
4145
style={{ alignSelf: "center", maxWidth: "100%" }}

‎docs/authentication/basic-logins/sms-otp.mdx‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,16 @@ expands accessibility—especially in regions where social login options may be
1818
To use this feature, developers must first enable `SMS OTP` from the Social Connections section in
1919
the [Web3Auth Dashboard](https://dashboard.web3auth.io).
2020

21-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
22-
<img src={SMSOTPToggle} style={{ alignSelf: "center", maxWidth: "100%" }} alt="SMS OTP Toggle" />
21+
<div style={{ display: "flex", margin: "20px 0" }}>
22+
<img
23+
src={SMSOTPToggle}
24+
style={{
25+
maxWidth: "600px",
26+
borderRadius: "8px",
27+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
28+
}}
29+
alt="SMS OTP Toggle"
30+
/>
2331
</div>
2432

2533
> By default, Web3Auth uses its own pre-configured credentials for SMS OTP login.
@@ -37,68 +45,60 @@ connection. Follow these steps:
3745
4. Enter your custom `Auth Connection ID`.
3846
5. Click `Add Connection` to complete the setup.
3947

40-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
48+
<div style={{ display: "flex", margin: "20px 0" }}>
4149
<img
4250
src={SMSOTPAddConnection}
43-
style={{ alignSelf: "center", maxWidth: "100%" }}
51+
style={{
52+
maxWidth: "600px",
53+
borderRadius: "8px",
54+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
55+
}}
4456
alt="SMS OTP Add Connection"
4557
/>
4658
</div>
4759

4860
## Usage
4961

50-
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
62+
<div style={{ display: "flex", margin: "20px 0" }}>
5163
<img
5264
src={SMSOTPOnboarding}
53-
style={{ alignSelf: "center", maxWidth: "100%" }}
65+
style={{
66+
maxWidth: "600px",
67+
borderRadius: "8px",
68+
boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
69+
}}
5470
alt="SMS OTP Onboarding"
5571
/>
5672
</div>
5773

58-
```js title="Example: React + Vite (main.tsx)"
59-
import { StrictMode } from "react";
60-
import { createRoot } from "react-dom/client";
61-
import "./index.css";
62-
63-
import {
64-
Web3AuthProvider,
65-
WALLET_CONNECTORS,
66-
AUTH_CONNECTION,
67-
WEB3AUTH_NETWORK,
68-
} from "@web3auth/modal/react";
69-
70-
import App from "./App.tsx";
71-
72-
createRoot(document.getElementById("root")!).render(
73-
<StrictMode>
74-
<Web3AuthProvider
75-
config={{
76-
web3AuthOptions: {
77-
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
78-
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
79-
modalConfig: {
80-
connectors: {
81-
[WALLET_CONNECTORS.AUTH]: {
82-
label: "auth",
83-
loginMethods: {
84-
// highlight-start
85-
sms_passwordless: {
86-
name: "SMS Passwordless",
87-
authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
88-
authConnectionId: "sms-test-demo", // Replace with your custom SMS OTP Auth Connection ID
89-
},
90-
// highlight-end
91-
},
92-
},
74+
```tsx title="web3authContext.tsx"
75+
import { WALLET_CONNECTORS, WEB3AUTH_NETWORK } from "@web3auth/modal";
76+
import { type Web3AuthContextConfig } from "@web3auth/modal/react";
77+
78+
const web3AuthContextConfig: Web3AuthContextConfig = {
79+
web3AuthOptions: {
80+
clientId: "YOUR_CLIENT_ID",
81+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
82+
modalConfig: {
83+
connectors: {
84+
[WALLET_CONNECTORS.AUTH]: {
85+
label: "auth",
86+
// focus-start
87+
loginMethods: {
88+
sms_passwordless: {
89+
name: "SMS Passwordless",
90+
authConnection: AUTH_CONNECTION.SMS_PASSWORDLESS,
91+
authConnectionId: "sms-test-demo", // Replace with your custom SMS OTP Auth Connection ID
9392
},
9493
},
94+
// focus-end
9595
},
96-
}}
97-
>
98-
<App />
99-
</Web3AuthProvider>
100-
</StrictMode>
101-
);
96+
},
97+
},
98+
},
99+
};
100+
101+
export default web3AuthContextConfig;
102102
```
103103

104104
Follow our [Quickstart Guide](/quick-start) to setup the basic flow.

‎docs/authentication/custom-connections/auth0.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,10 +154,10 @@ function LoginPage() {
154154

155155
const loginWithAuth0 = async () => {
156156
await connectTo(WALLET_CONNECTORS.AUTH, {
157-
// highlight-start
157+
// focus-start
158158
authConnectionId: "auth0-auth-connection-id",
159159
authConnection: AUTH_CONNECTION.CUSTOM,
160-
// highlight-end
160+
// focus-end
161161
});
162162
};
163163

‎docs/authentication/custom-connections/aws-cognito.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ function LoginPage() {
118118

119119
const loginWithCognito = async () => {
120120
try {
121-
// highlight-start
121+
// focus-start
122122
await connectTo(WALLET_CONNECTORS.AUTH, {
123123
authConnection: AUTH_CONNECTION.CUSTOM,
124124
authConnectionId: "cognito-auth-connection-id",
@@ -130,7 +130,7 @@ function LoginPage() {
130130
scope: "email profile openid",
131131
},
132132
});
133-
// highlight-end
133+
// focus-end
134134
} catch (error) {
135135
console.error("AWS Cognito authentication error:", error);
136136
}

‎docs/authentication/custom-connections/custom-jwt.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ function LoginPage() {
128128
// highlight-next-line
129129
const idToken = await generateJWT();
130130

131-
// highlight-start
131+
// focus-start
132132
await connectTo(WALLET_CONNECTORS.AUTH, {
133133
authConnectionId: "custom-jwt-auth-connection-id",
134134
authConnection: AUTH_CONNECTION.CUSTOM,
@@ -137,7 +137,7 @@ function LoginPage() {
137137
isUserIdCaseSensitive: false,
138138
},
139139
});
140-
// highlight-end
140+
// focus-end
141141
} catch (error) {
142142
console.error("Custom JWT authentication error:", error);
143143
}

‎docs/authentication/custom-connections/firebase.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ function LoginPage() {
181181

182182
const idToken = await result.user.getIdToken(true);
183183

184-
// highlight-start
184+
// focus-start
185185
await connectTo(WALLET_CONNECTORS.AUTH, {
186186
authConnectionId: "firebase-auth-connection-id",
187187
authConnection: AUTH_CONNECTION.CUSTOM,
@@ -190,7 +190,7 @@ function LoginPage() {
190190
isUserIdCaseSensitive: false,
191191
},
192192
});
193-
// highlight-end
193+
// focus-end
194194
} catch (error) {
195195
console.error("Firebase authentication error:", error);
196196
}

0 commit comments

Comments
 (0)