Skip to content

Commit a895c8b

Browse files
shahbaz17shahbaz17
committed
Add more content to custom connections
1 parent e9ab0ed commit a895c8b

16 files changed

+540
-51
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ createRoot(document.getElementById("root")!).render(
7878
<Web3AuthProvider
7979
config={{
8080
web3AuthOptions: {
81-
clientId: "your-client-id", // Replace with your Client ID
81+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
8282
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
8383
modalConfig: {
8484
connectors: {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ createRoot(document.getElementById("root")!).render(
7474
<Web3AuthProvider
7575
config={{
7676
web3AuthOptions: {
77-
clientId: "your-client-id", // Replace with your Client ID
77+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
7878
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
7979
modalConfig: {
8080
connectors: {

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

Lines changed: 117 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,31 @@
11
---
2-
title: Auth0 Service Provider with Web3Auth
2+
title: Auth0 Login with Web3Auth
33
sidebar_label: Auth0
4-
description: "Auth0 Service Provider Set up | Documentation - Web3Auth"
4+
description: "Auth0 Login with Web3Auth | Documentation - Web3Auth"
55
---
66

77
import Tiles from "@theme/Tiles";
88

9-
Auth0 allows you to easily add authentication to your application. Web3Auth supports Auth0 as a
10-
service provider. You can create a connection for Auth0 and integrate it into your application. This
11-
page will help you set up Auth0 as a service provider with Web3Auth.
9+
import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
10+
import Auth0Connection from "@site/static/images/dashboard/auth0-connection.png";
11+
12+
Auth0 is a powerful authentication and authorization platform that enables developers to securely
13+
manage user identities. Web3Auth offers native support for integrating Auth0 as a service provider,
14+
allowing projects to leverage Auth0’s robust authentication mechanisms within the Web3Auth
15+
ecosystem.
1216

1317
[Take a look at the supported social logins on Auth0](https://marketplace.auth0.com/categories/social-login)
1418

1519
## Create an Auth0 Application
1620

17-
If you haven't already, create an Auth0 application for your project. It is the mandatory step
18-
before we proceed further. After the basic setup, we'll learn how to create an Auth0 connection for
19-
the Web3Auth project. You can follow the link below to set up Auth0 for your project. If we are
20-
missing any platform/framework, you can always
21-
[check out Auth0 documentation](https://auth0.com/docs/quickstart/native#webapp).
21+
To begin, developers must first create an Auth0 application specific to their project. This initial
22+
setup is essential before configuring the connection with Web3Auth. Once the Auth0 application is
23+
created, developers can proceed to establish an Auth0 connection within the Web3Auth Dashboard.
24+
25+
This integration allows users to authenticate through Auth0, while still benefiting from Web3Auth’s
26+
key management and wallet abstraction features. For platform-specific implementation details or
27+
additional customization, developers are encouraged to refer to the
28+
[official Auth0 documentation](https://auth0.com/docs/quickstart/native#webapp).
2229

2330
export const Auth0Setup = [
2431
{
@@ -63,4 +70,103 @@ export const Auth0Setup = [
6370

6471
## Create an Auth0 Connection
6572

66-
{/* TODO: Add Auth0 Connection Steps */}
73+
:::success Create Auth0 Connection on Dashboard
74+
75+
To use this feature, developers must go to the `Custom Connections` tab in the
76+
[Web3Auth Dashboard](https://dashboard.web3auth.io).
77+
78+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
79+
<img
80+
src={CustomConnectionOptions}
81+
style={{ alignSelf: "center", maxWidth: "100%" }}
82+
alt="Custom Connection Options"
83+
/>
84+
</div>
85+
86+
:::
87+
88+
Follow these steps to create an Auth0 connection:
89+
90+
1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
91+
2. Go to the `Custom Connections` section.
92+
3. Click on the `Settings` icon near the Auth0 connection.
93+
4. Enter the `Auth Connection ID`.
94+
5. Select the `JWT user identifier`: `email`, `sub` or `custom`.
95+
6. Toggle the Case Sensitivity of `User Identifier`. (Optional)
96+
7. Enter `Auth0 Client ID`.
97+
8. Enter `Auth0 Domain`.
98+
9. Finally, click on the `Add Connection` button.
99+
100+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
101+
<img
102+
src={Auth0Connection}
103+
style={{ alignSelf: "center", maxWidth: "100%" }}
104+
alt="Auth0 Connection"
105+
/>
106+
</div>
107+
108+
## Usage
109+
110+
### Initialize Web3Auth
111+
112+
Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
113+
React tree as possible.
114+
115+
```js title="Example: React + Vite (main.tsx)"
116+
import { StrictMode } from "react";
117+
import { createRoot } from "react-dom/client";
118+
import "./index.css";
119+
120+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
121+
122+
import App from "./App.tsx";
123+
124+
createRoot(document.getElementById("root")!).render(
125+
<StrictMode>
126+
<Web3AuthProvider
127+
config={{
128+
web3AuthOptions: {
129+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
130+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
131+
},
132+
}}
133+
>
134+
<App />
135+
</Web3AuthProvider>
136+
</StrictMode>
137+
);
138+
```
139+
140+
Since, the `Auth0 Connection` details are available from Dashboard, developers don't need to pass
141+
any additional parameters to the `Web3AuthProvider`.
142+
143+
> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
144+
145+
### Login with Auth0
146+
147+
```jsx
148+
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
149+
import { useAccount } from "wagmi";
150+
151+
function LoginPage() {
152+
const { connectTo } = useWeb3AuthConnect();
153+
const { address } = useAccount();
154+
155+
const loginWithAuth0 = async () => {
156+
await connectTo(WALLET_CONNECTORS.AUTH, {
157+
// highlight-start
158+
authConnectionId: "auth0-auth-connection-id",
159+
authConnection: AUTH_CONNECTION.CUSTOM,
160+
// highlight-end
161+
});
162+
};
163+
164+
return (
165+
<div>
166+
<button onClick={() => loginWithAuth0()}>Login with Auth0</button>
167+
<p>Address: {address}</p>
168+
{/* 0xA8b29d40d0FE6a0c153A5759B1f0059d8b7654c5 */}
169+
</div>
170+
);
171+
}
172+
```

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

Lines changed: 133 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,147 @@
11
---
2-
title: AWS Coginto Service Provider Set up
2+
title: AWS Cognito Login with Web3Auth
33
sidebar_label: AWS Cognito
4-
description: "AWS Cognito Service Provider Set up | Documentation - Web3Auth"
4+
description: "AWS Cognito Login with Web3Auth | Documentation - Web3Auth"
55
---
66

7-
AWS Cognito allows you to easily add authentication to your application. Web3Auth supports AWS
8-
Cognito as a service provider. You can create a connection for AWS Cognito and integrate it into
9-
your application. This page will help you set up AWS Cognito as a service provider with Web3Auth.
7+
import CustomConnectionOptions from "@site/static/images/dashboard/authentication-custom-connections.png";
8+
import AWSConnection from "@site/static/images/dashboard/aws-cognito-connection.png";
9+
10+
AWS Cognito is a scalable authentication service provided by Amazon Web Services that enables
11+
developers to securely manage user sign-up, sign-in, and access control. Web3Auth supports AWS
12+
Cognito as a service provider, allowing seamless integration between AWS Cognito’s authentication
13+
capabilities and Web3Auth’s decentralized key management infrastructure.
1014

1115
[Take a look at the supported social logins on AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html)
1216

1317
## Create an AWS Cognito Application
1418

15-
If you haven't already, create an AWS Cognito application for your project. It is the mandatory step
16-
before we proceed further. After the basic setup, we'll learn how to create an AWS Cognito
17-
connection for the Web3Auth project.
19+
To begin the integration process, developers must first create a new AWS Cognito application using
20+
the [AWS Management Console](https://console.aws.amazon.com/). This initial setup is required before
21+
configuring the connection within Web3Auth.
22+
23+
Once the AWS Cognito application is created, developers can proceed to add it as a custom connection
24+
in the Web3Auth Dashboard.
1825

1926
[Learn how to set up AWS Cognito](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-console).
2027

2128
## Create an AWS Cognito Connection
2229

23-
{/* TODO: Add AWS Cognito Connection Steps */}
30+
:::success Create AWS Cognito Connection on Dashboard
31+
32+
To use this feature, developers must go to the `Custom Connections` tab in the
33+
[Web3Auth Dashboard](https://dashboard.web3auth.io).
34+
35+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "center" }}>
36+
<img
37+
src={CustomConnectionOptions}
38+
style={{ alignSelf: "center", maxWidth: "100%" }}
39+
alt="Custom Connection Options"
40+
/>
41+
</div>
42+
43+
:::
44+
45+
Follow these steps to create a AWS Cognito connection:
46+
47+
1. Visit the [Web3Auth Dashboard](https://dashboard.web3auth.io).
48+
1. Go to the `Custom Connections` section.
49+
1. Click on the `Settings` icon near the `AWS Cognito` connection.
50+
1. Enter the `Cognito Connection ID`.
51+
1. Paste `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}/.well-known/jwks.json` as
52+
`JWKS Endpoint`.
53+
1. Paste a sample `JWT Token` to auto populate the best **JWT validations** possible.
54+
1. Select the `JWT user identifier`: `email`, `sub` or `custom`.
55+
1. Toggle the Case Sensitivity of `User Identifier`. (Optional)
56+
1. Click on `Add Custom Validations` to add validations manually.
57+
1. Type iss as a field and `https://cognito-idp.{REGION}.amazonaws.com/{USER_POOL_ID}` as a
58+
value.
59+
1. Next, type aud as a field and `APP_CLIENT_ID` as a value.
60+
1. Finally, click on the `Add Connection` button.
61+
62+
> Note: Replace the `REGION`, `USER_POOL_ID` and `APP_CLIENT_ID` with your Cognito specific details.
63+
64+
<div style={{ flexBasis: "300px", flexGrow: "1", textAlign: "left" }}>
65+
<img
66+
src={AWSConnection}
67+
style={{ alignSelf: "center", maxWidth: "100%" }}
68+
alt="AWS Cognito Connection"
69+
/>
70+
</div>
71+
72+
## Usage
73+
74+
### Initialize Web3Auth
75+
76+
Wrap your app with the `Web3AuthProvider`. This provider should be as close to the root of your
77+
React tree as possible.
78+
79+
```js title="Example: React + Vite (main.tsx)"
80+
import { StrictMode } from "react";
81+
import { createRoot } from "react-dom/client";
82+
import "./index.css";
83+
84+
import { Web3AuthProvider, WEB3AUTH_NETWORK } from "@web3auth/modal/react";
85+
86+
import App from "./App.tsx";
87+
88+
createRoot(document.getElementById("root")!).render(
89+
<StrictMode>
90+
<Web3AuthProvider
91+
config={{
92+
web3AuthOptions: {
93+
clientId: "WEB3AUTH_CLIENT_ID", // Replace with your Client ID
94+
web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
95+
},
96+
}}
97+
>
98+
<App />
99+
</Web3AuthProvider>
100+
</StrictMode>
101+
);
102+
```
103+
104+
Since, the `AWS Cognito Connection` details are available from Dashboard, developers don't need to
105+
pass any additional parameters to the `Web3AuthProvider`.
106+
107+
> Follow our [Quickstart Guide](/quick-start) to setup the basic flow.
108+
109+
### Login with AWS Cognito
110+
111+
```jsx
112+
import { useWeb3AuthConnect, WALLET_CONNECTORS, AUTH_CONNECTION } from "@web3auth/modal/react";
113+
import { useAccount } from "wagmi";
114+
115+
function LoginPage() {
116+
const { connectTo } = useWeb3AuthConnect();
117+
const { address } = useAccount();
118+
119+
const loginWithCognito = async () => {
120+
try {
121+
// highlight-start
122+
await connectTo(WALLET_CONNECTORS.AUTH, {
123+
authConnection: AUTH_CONNECTION.CUSTOM,
124+
authConnectionId: "cognito-auth-connection-id",
125+
extraLoginOptions: {
126+
clientId: "COGNITO_CLIENT_ID",
127+
domain: "COGNITO_DOMAIN",
128+
verifierIdField: "email",
129+
response_type: "token",
130+
scope: "email profile openid",
131+
},
132+
});
133+
// highlight-end
134+
} catch (error) {
135+
console.error("AWS Cognito authentication error:", error);
136+
}
137+
};
138+
139+
return (
140+
<div>
141+
<button onClick={() => loginWithCognito()}>Login with AWS Cognito</button>
142+
<p>Address: {address}</p>
143+
{/* 0x1e46c61f7F5B1D9B8505CEdED94AB1468dC28aa0 */}
144+
</div>
145+
);
146+
}
147+
```

0 commit comments

Comments
 (0)