This repository has been archived by the owner on Jan 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 146
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
43787f4
commit ceb02c6
Showing
4 changed files
with
351 additions
and
86 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,94 +3,118 @@ slug: /embedded-wallet/custom-auth-server | |
| title: Custom Auth Server | ||
| --- | ||
|
|
||
| # Create a custom auth server | ||
| # Create a custom JWT auth server | ||
|
|
||
| Learn how to integrate your auth backend with our embedded wallets solution so you can onboard your users into web3 seamlessly. | ||
| Learn how to integrate your auth backend with our embedded wallets solution so you can onboard your users into web3 seamlessly. | ||
|
|
||
| This guide will show you how to create your own Auth Server. By doing so, you can have full control over user authentication and data security. This allows you to ensure that your application meets specific compliance requirements while also providing a customized sign-in experience. | ||
| This guide will show you how to create your own Auth Server that is compatible with the `auth_endpoint` strategy. By doing so, you can have full control over user authentication and data security. This allows you to ensure that your application meets specific compliance requirements while also providing a customized sign-in experience. | ||
|
|
||
| :::caution | ||
| This guide is simplified for demonstration purposes and is not ready for production use. When modifying it for production, secure your endpoints and avoid hard-coding secrets or sensitive information. We recommend using environment variables and secret managers. | ||
| ::: | ||
|
|
||
| ### Setup | ||
| ### 5 min whirlwind tour | ||
|
|
||
| 1. Create a new directory for your project and navigate to it in your CLI | ||
| ### **Integrate Embedded Wallets** | ||
|
|
||
| ```bash | ||
| mkdir jwt-auth-server | ||
| cd jwt-auth-server | ||
| ``` | ||
| 1. Navigate to Wallets > [Embedded Wallets](https://thirdweb.com/dashboard/wallets/embedded) in the thirdweb dashboard. | ||
| 2. Create a thirdweb API key if you don't have one or select an existing key to use for this project. [Learn more about API keys.](https://portal.thirdweb.com/api-keys) | ||
|
|
||
| 2. Initialize a new Node.js application | ||
|  | ||
|
|
||
| ```bash | ||
| npm init -y | ||
| 3. Allowlist domain or bundle ids in Access Restrictions. | ||
| 4. Navigate to the Configuration view and enable **Custom Auth Endpoint** | ||
|
|
||
| yarn init -y | ||
| ``` | ||
|  | ||
|
|
||
| 3. Install the necessary packages | ||
| 5. Set the Auth Endpoint URL to `https://embedded-wallet.thridweb.com/api/2023-11-30/embedded-wallet/auth/test-custom-auth-endpoint` | ||
| 6. Save the configuration. | ||
| 7. Copy the client ID. | ||
| 8. In your preferred thirdweb client SDK, pass the payload you retrieved from logging in to the server. | ||
|
|
||
| ```bash | ||
| npm install express jsonwebtoken | ||
| ``` | ||
| You can now auth into the wallet and use it to sign transactions like so (see [bring your own auth for more](/embedded-wallet/custom-auth)): | ||
|
|
||
| ### **Generate RSA Key Pair:** | ||
| <Tabs> | ||
| <TabItem value="react" label="React & React Native"> | ||
|
|
||
| 1. To generate a private and a public key run | ||
| In React and React Native, the `useEmbeddedWallet()` hook handles authentication and connection states. | ||
|
|
||
| ```bash | ||
| ssh-keygen -t rsa -b 2048 -m PEM -f keys/rsa.key | ||
| ``` | ||
| ```typescript | ||
| import { useEmbeddedWallet } from "@thirdweb-dev/react"; // or /react-native | ||
|
|
||
| 2. To create the output file run | ||
| const embeddedWallet = useEmbeddedWallet(); | ||
|
|
||
| ```bash | ||
| openssl rsa -in keys/rsa.key -pubout -outform PEM -out keys/rsa.key.pub | ||
| ``` | ||
| const handlePostLogin = async (jwt: string) => { | ||
| await embeddedWallet.connect({ | ||
| strategy: "auth_endpoint", | ||
| payload: JSON.stringify({ userId:"ANY_RANDOM_ID_HERE" }), | ||
| }); | ||
| }; | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| <TabItem value="typescript" label="Other Typescript Frameworks"> | ||
|
|
||
| In other frameworks, use your own instance of the wallet to authenticate and connect. | ||
|
|
||
| ```typescript | ||
| import { EmbeddedWallet } from "@thirdweb-dev/wallets"; | ||
| import { Goerli } from "@thirdweb-dev/chains"; | ||
|
|
||
| const embeddedWallet = new EmbeddedWallet({ | ||
| chain: Goerli, // chain to connect to | ||
| clientId: "YOUR_CLIENT_ID", // Your thirdweb client ID | ||
| }); | ||
|
|
||
| ### **Convert Public Key to JSON Web Key Set (JWKS):** | ||
| const authResult = await embeddedWallet.authenticate({ | ||
| strategy: "auth_endpoint", | ||
| payload: JSON.stringify({ userId:"ANY_RANDOM_ID_HERE" }), | ||
| }); | ||
|
|
||
| 1. Display the public key: | ||
| const walletAddress = await embeddedWallet.connect({ authResult }); | ||
| ``` | ||
|
|
||
| </TabItem> | ||
| </Tabs> | ||
|
|
||
| A persistent, cross-platform wallet is now created for your user! | ||
|
|
||
| Of course, you would use your own auth server instead of the one we provided. The rest of this guide will show you how to create your own auth server. | ||
|
|
||
| ### Setup | ||
|
|
||
| 1. Create a new directory for your project and navigate to it in your CLI | ||
|
|
||
| ```bash | ||
| cat keys/rsa.key.pub | ||
| mkdir custom-auth-server | ||
| cd custom-auth-server | ||
| ``` | ||
|
|
||
| 2. Copy the displayed public key. | ||
| 3. Convert your public key to a JWK using an online JWK Creator tool. We recommend using [JWK Creator by Russel Davies](https://github.com/russelldavies/jwk-creator). | ||
| 2. Initialize a new Node.js application | ||
|
|
||
| 1. Paste the public key, set Key ID as `0` (arbitrary string, must match when signing JWT), and then note down the generated JWK. | ||
| ```bash | ||
| npm init -y | ||
|
|
||
|  | ||
| yarn init -y | ||
| ``` | ||
|
|
||
| 4. Create a `jwks.json` in the project root and place the generated JWK in a `keys` array. | ||
| 3. Install the necessary packages | ||
|
|
||
| ```bash | ||
| { | ||
| "keys": [ | ||
| { | ||
| ... JWK ... | ||
| } | ||
| ] | ||
| } | ||
| npm install express jsonwebtoken | ||
| ``` | ||
|
|
||
| ### **Create the Server:** | ||
|
|
||
| 1. In the `jw-auth-server` directory, create a file at the root named `server.js` and paste the following: | ||
| 1. In the `custom-auth-server` directory, create a file at the root named `server.js` and paste the following: | ||
|
|
||
| ```jsx | ||
| const express = require("express"); | ||
| const fs = require("fs"); | ||
| const jwt = require("jsonwebtoken"); | ||
|
|
||
| const app = express(); | ||
| const PORT = process.env.PORT || 3000; | ||
|
|
||
| const PRIVATE_KEY = fs.readFileSync("./keys/rsa.key", "utf8"); | ||
| const jwks = require("./jwks.json"); | ||
|
|
||
| const users = [ | ||
| { id: 1, email: "[email protected]", password: "password123" }, | ||
|
|
@@ -105,33 +129,26 @@ This guide is simplified for demonstration purposes and is not ready for product | |
| ); | ||
| if (!user) return res.status(401).send({ message: "Invalid credentials" }); | ||
|
|
||
| const payload = { | ||
| iss: "http://your-domain.com", | ||
| sub: user.id.toString(), | ||
| aud: "EpicGame", | ||
| email: user.email, | ||
| exp: Math.floor(Date.now() / 1000) + 3600, | ||
| }; | ||
|
|
||
| const token = jwt.sign(payload, PRIVATE_KEY, { | ||
| algorithm: "RS256", | ||
| keyid: "0", | ||
| }); | ||
|
|
||
| res.send({ token }); | ||
| res.send({ payload: user.id }); | ||
| }); | ||
|
|
||
| app.get("/.well-known/jwks.json", (req, res) => { | ||
| res.json(jwks); | ||
| app.get("/thirdweb-will-call-this", (req, res) => { | ||
| const { payload } = req.body; | ||
| if (!payload) return res.status(401).send({ message: "Invalid credentials" }); | ||
| const user = users.find((u) => u.id === payload); | ||
| if (!user) return res.status(401).send({ message: "Invalid credentials" }); | ||
| return res.send({ | ||
| userId: user.id, | ||
| email: user.email, | ||
| exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 30, | ||
| }); | ||
| }); | ||
|
|
||
| app.listen(PORT, () => { | ||
| console.log(`Server started on port ${PORT}`); | ||
| }); | ||
| ``` | ||
|
|
||
| 2. Replace `http://your-domain.com` with the actual domain for the application. | ||
|
|
||
| ### **Test Locally** | ||
|
|
||
| 1. Start the server: | ||
|
|
@@ -146,36 +163,26 @@ This guide is simplified for demonstration purposes and is not ready for product | |
| curl -X POST http://localhost:3000/login -H "Content-Type: application/json" -d '{"email": "[email protected]", "password": "password123"}' | ||
| ``` | ||
|
|
||
| 3. Test JWKS: | ||
|
|
||
| ```bash | ||
| curl http://localhost:3000/.well-known/jwks.json | ||
| ``` | ||
|
|
||
| ### **Deploy** | ||
|
|
||
| To deploy the server, you can use use services such as [Zeet](https://zeet.co/) or [Docker](https://www.docker.com/). | ||
|
|
||
| Once deployed, replace `http://localhost:3000` in the JWT payload with your actual domain | ||
|
|
||
| ### **Integrate Embedded Wallets** | ||
|
|
||
| 1. Navigate to Wallets > [Embedded Wallets](https://thirdweb.com/dashboard/wallets/embedded) in the thirdweb dashboard. | ||
| 2. Create a thirdweb API key if you don’t have one or select an existing key to use for this project. [Learn more about API keys.](https://portal.thirdweb.com/api-keys) | ||
| 2. Create a thirdweb API key if you don't have one or select an existing key to use for this project. [Learn more about API keys.](https://portal.thirdweb.com/api-keys) | ||
|
|
||
|  | ||
|
|
||
| 3. Allowlist domain or bundle ids in Access Restrictions. | ||
| 4. Navigate to the Configuration view and enable **Custom JSON Web Token** | ||
| 4. Navigate to the Configuration view and enable **Custom Auth Endpoint** | ||
|
|
||
|  | ||
|
|
||
| 5. Set the JWKS URI to `your-domain/.well-known/jwks.json` | ||
| 6. Set the AUD to `EpicGame` or the value you set as the aud in the `server.js` file. | ||
|
|
||
|  | ||
|
|
||
| 7. Copy the client ID. | ||
| 8. In your preferred thirdweb client SDK, pass the JWT you retrieved from logging in to the server. | ||
| 5. Set the Auth Endpoint URL to `https://your-domain/thirdweb-will-call-this` | ||
| 6. Set any additional headers that you would like to send to your server. For example, you can set the `Authorization` header to with a bearer token to authenticate the request coming to the auth endpoint. | ||
| 7. Save the configuration. | ||
| 8. Copy the client ID. | ||
| 9. In your preferred thirdweb client SDK, pass the payload you retrieved from logging in to the server. | ||
|
|
||
| A persistent, cross-platform wallet is now created for your user. | ||
Oops, something went wrong.