diff --git a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/1 Bring your Auth.mdx b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/1 Bring your Auth.mdx
index 355e9694bb..33a1e33445 100644
--- a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/1 Bring your Auth.mdx
+++ b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/1 Bring your Auth.mdx
@@ -3,25 +3,52 @@ slug: /embedded-wallet/custom-auth
title: Use your own auth
---
-import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
import QuickstartCard from "@components/QuickstartCard";
By default, the embedded wallet service handles two things: auth, and spinning up crypto wallets tied to the auth. We require
valid authentication to ensure a wallet is created for the right person.
-If you already have your own auth and only want to spin up wallets, we offer a simple way to hook up any **OpenID Connect ("OIDC") compatible** auth to create embedded wallets.
+If you already have your own auth and only want to spin up wallets, we offer a simple way to hook up any auth to create embedded wallets.
## How it works
+We offer two kinds of custom auth. One that is based on the OIDC standard, and one that is is based on you having you bring your own auth server.
+
+### Bring your own auth server
+
+- You have your own auth server that you use to authenticate users
+- When a user logs in, you are able to generate a public identifier that allows you to identify the user.
+- You can pass this identifier to the embedded wallet to generate a wallet for the user.
+- When verifying the user, we will hit an endopint that you provide to verify the user's identity.
+- We will then generate a wallet for the user if the provided payload is valid.
+
+### OIDC
+
- An OIDC auth system has a public-private keypair, where the private key is used to sign auth tokens
- The public key is uploaded to a public URL in JWKS format. The standard location is `https://{domain}.com/.well-known/jwks.json`
- When a user logs in, a JWT token called the idToken is generated and signed by the private key. The OIDC spec provides an interface for fields that are used in this token.
-- We use the public key to verify that the JWT was signed correctly, and proceed to generate a wallet based on the `sub` (user identifier) value of the idToken.
+- This JWT is then passed to the embedded wallet to generate a wallet for the user.
+- We will verify the JWT against the public key to verify that the JWT was signed correctly. Upon successful verification, we will proceed to generate a wallet based on the `sub` (user identifier) value of the idToken.
## Configuration Setup
In your API key settings, click edit, look for "Custom Auth" and provide the following values:
+### Bring your own auth server
+
+- An endpoint that we can hit to verify the user's identity
+ - This endpoint should accept a POST request with a JSON body containing the following fields:
+ - `payload`: This will correspont to the public identifier that was generated for your user.
+ - The endpoint should return a JSON body containing the following fields:
+ - `userId`: A uid for the user. Note that you can only create one wallet per `userId` at this point
+ - `email` (optional): If provided, the user will be able to access the same account outside of the platform for things like private key export // using with wallet connect etc.
+ - `exp` (optional): An expiration date for the user's wallet session. By default a session is 7 days long.
+- A list of custom headers (optional)
+ - These headers will be sent with every request to your verification endpoint. You can use these to authenticate the request.
+
+### OIDC
+
- The URL of the JWKS file (public key)
- This is used to verify the token was signed by you.
- The `aud` value of the idToken
@@ -29,7 +56,57 @@ In your API key settings, click edit, look for "Custom Auth" and provide the fol
## Authenticating a user
-Once you've logged in with your own auth, you can pass the user's JWT to the embedded wallet to authenticate and connect.
+Once you've logged in with your own auth, you can pass the user's detail to the embedded wallet to authenticate and connect.
+
+### Bring your own auth server
+
+
+
+
+
+In React and React Native, the `useEmbeddedWallet()` hook handles authentication and connection states.
+
+```typescript
+import { useEmbeddedWallet } from "@thirdweb-dev/react"; // or /react-native
+
+const embeddedWallet = useEmbeddedWallet();
+
+const handlePostLogin = async (jwt: string) => {
+ await embeddedWallet.connect({
+ strategy: "auth_endpoint",
+ payload,
+ });
+};
+```
+
+
+
+
+
+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
+});
+
+const authResult = await embeddedWallet.authenticate({
+ strategy: "auth_endpoint",
+ payload,
+});
+
+const walletAddress = await embeddedWallet.connect({ authResult });
+```
+
+
+
+
+
+### OIDC
@@ -51,7 +128,7 @@ const handlePostLogin = async (jwt: string) => {
-
+
In other frameworks, use your own instance of the wallet to authenticate and connect.
diff --git a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/2 custom-auth-server.mdx b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/2 custom-auth-server.mdx
index aa8764ef3f..fed4fc4af1 100644
--- a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/2 custom-auth-server.mdx
+++ b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/2 custom-auth-server.mdx
@@ -3,101 +3,138 @@ slug: /embedded-wallet/custom-auth-server
title: Custom Auth Server
---
+import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
+
# Create a custom 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 minute quickstart
-1. Create a new directory for your project and navigate to it in your CLI
+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)
- ```bash
- mkdir jwt-auth-server
- cd jwt-auth-server
- ```
+ 
-2. Initialize a new Node.js application
+3. Allowlist domain or bundle ids in Access Restrictions.
+4. Navigate to the Configuration view and enable **Custom Auth Endpoint**
- ```bash
- npm init -y
+ 
- yarn init -y
- ```
+5. Set the Auth Endpoint URL to `https://embedded-wallet.thirdweb.com/api/2023-11-30/embedded-wallet/auth/test-custom-auth-endpoint` for testing purposes. You will replace this later with your own auth server endpoint to verify the `payload`.
+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.
-3. Install the necessary packages
+You can now auth into the wallet and use it to sign transactions like so (see [use your own auth for more](/embedded-wallet/custom-auth)):
- ```bash
- npm install express jsonwebtoken
- ```
+
+
-### **Generate RSA Key Pair:**
+In React and React Native, the `useEmbeddedWallet()` hook handles authentication and connection states.
-1. To generate a private and a public key run
+```typescript
+import { useEmbeddedWallet } from "@thirdweb-dev/react"; // or /react-native
- ```bash
- ssh-keygen -t rsa -b 2048 -m PEM -f keys/rsa.key
- ```
+const embeddedWallet = useEmbeddedWallet();
-2. To create the output file run
+const handlePostLogin = async () => {
+ await embeddedWallet.connect({
+ strategy: "auth_endpoint",
+ // in production this would be your public identifier for the user
+ payload: JSON.stringify({ userId:"ANY_RANDOM_ID_HERE" }),
+ encryptionKey: "ANY_RANDOM_STRING_HERE"
+ });
+};
+```
- ```bash
- openssl rsa -in keys/rsa.key -pubout -outform PEM -out keys/rsa.key.pub
- ```
+
+
-### **Convert Public Key to JSON Web Key Set (JWKS):**
+In other frameworks, use your own instance of the wallet to authenticate and connect.
-1. Display the public key:
+```typescript
+import { EmbeddedWallet } from "@thirdweb-dev/wallets";
+import { Goerli } from "@thirdweb-dev/chains";
- ```bash
- cat keys/rsa.key.pub
- ```
+const embeddedWallet = new EmbeddedWallet({
+ chain: Goerli, // chain to connect to
+ clientId: "YOUR_CLIENT_ID", // Your thirdweb client ID
+});
+
+const authResult = await embeddedWallet.authenticate({
+ strategy: "auth_endpoint",
+ payload: JSON.stringify({ userId:"ANY_RANDOM_ID_HERE" }),
+ encryptionKey: "ANY_RANDOM_STRING_HERE"=
+});
+
+const walletAddress = await embeddedWallet.connect({ authResult });
+```
-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).
+
+
- 1. Paste the public key, set Key ID as `0` (arbitrary string, must match when signing JWT), and then note down the generated JWK.
+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.
-4. Create a `jwks.json` in the project root and place the generated JWK in a `keys` array.
+### Setup
+
+The following steps will show you how to create a simple auth server that can be used with the embedded wallet.
+
+At a high level, the auth server will:
+
+1. Handle login for the user into your application.
+2. Have a way to get a public identifier for the user.
+3. Have an endpoint to verify the public identifier and return some basic information about the user
+
+Steps 1 and 2 are up to you to implement. You can use any auth strategy you want.
+
+The endpoint in step 3 is what your register as your auth endpoint on the thirdweb dashboard.
+
+Here's a high level diagram:
+
+
+1. Create a new directory for your project and navigate to it in your CLI
+
+ ```bash
+ mkdir custom-auth-server
+ cd custom-auth-server
+ ```
+
+2. Initialize a new Node.js application
```bash
- {
- "keys": [
- {
- ... JWK ...
- }
- ]
- }
+ npm init -y
+
+ yarn init -y
```
### **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: "user@example.com", password: "password123" },
];
app.use(express.json());
+ // This is what your app calls to login a user and get a public identifier for the user (otherwise known as the payload)
app.post("/login", (req, res) => {
const { email, password } = req.body;
const user = users.find(
@@ -105,24 +142,24 @@ 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 });
});
+ // This is a sample endpoint that yuou would register on the thirdweb dashboard for us to verify the payload
+ app.get("/thirdweb-will-call-this", (req, res) => {
+ const { payload } = req.body;
+ if (!payload) return res.status(401).send({ message: "Invalid credentials" });
- app.get("/.well-known/jwks.json", (req, res) => {
- res.json(jwks);
+ // you would write your own logic here to verify the payload here
+ const user = users.find((u) => u.id === payload);
+ if (!user) return res.status(401).send({ message: "Invalid credentials" });
+
+ // once the user is successfully verified, you can return the following field
+ return res.send({
+ userId: user.id,
+ // the last two fields here are optional
+ email: user.email,
+ exp: Math.floor(Date.now() / 1000) + 60 * 60 * 24 * 30,
+ });
});
app.listen(PORT, () => {
@@ -130,8 +167,6 @@ This guide is simplified for demonstration purposes and is not ready for product
});
```
-2. Replace `http://your-domain.com` with the actual domain for the application.
-
### **Test Locally**
1. Start the server:
@@ -146,36 +181,10 @@ 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": "user@example.com", "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)
-
- 
-
-3. Allowlist domain or bundle ids in Access Restrictions.
-4. Navigate to the Configuration view and enable **Custom JSON Web Token**
-
- 
-
-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.
-
-A persistent, cross-platform wallet is now created for your user.
+Refer top the [quickstart above](#5-minute-quickstart) to integrate the embedded wallet into your application.
\ No newline at end of file
diff --git a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/3 custom-jwt-auth-server.mdx b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/3 custom-jwt-auth-server.mdx
new file mode 100644
index 0000000000..06753a6b19
--- /dev/null
+++ b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/3 custom-jwt-auth-server.mdx
@@ -0,0 +1,181 @@
+---
+slug: /embedded-wallet/custom-jwt-auth-server
+title: Custom JWT 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.
+
+This guide will show you how to create your own Auth Server that is compatible with the JWT auth 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
+
+1. Create a new directory for your project and navigate to it in your CLI
+
+ ```bash
+ mkdir jwt-auth-server
+ cd jwt-auth-server
+ ```
+
+2. Initialize a new Node.js application
+
+ ```bash
+ npm init -y
+
+ yarn init -y
+ ```
+
+3. Install the necessary packages
+
+ ```bash
+ npm install express jsonwebtoken
+ ```
+
+### **Generate RSA Key Pair:**
+
+1. To generate a private and a public key run
+
+ ```bash
+ ssh-keygen -t rsa -b 2048 -m PEM -f keys/rsa.key
+ ```
+
+2. To create the output file run
+
+ ```bash
+ openssl rsa -in keys/rsa.key -pubout -outform PEM -out keys/rsa.key.pub
+ ```
+
+### **Convert Public Key to JSON Web Key Set (JWKS):**
+
+1. Display the public key:
+
+ ```bash
+ cat keys/rsa.key.pub
+ ```
+
+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).
+
+ 1. Paste the public key, set Key ID as `0` (arbitrary string, must match when signing JWT), and then note down the generated JWK.
+
+ 
+
+4. Create a `jwks.json` in the project root and place the generated JWK in a `keys` array.
+
+ ```bash
+ {
+ "keys": [
+ {
+ ... JWK ...
+ }
+ ]
+ }
+ ```
+
+### **Create the Server:**
+
+1. In the `jw-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: "user@example.com", password: "password123" },
+ ];
+
+ app.use(express.json());
+
+ app.post("/login", (req, res) => {
+ const { email, password } = req.body;
+ const user = users.find(
+ (u) => u.email === email && u.password === password,
+ );
+ 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 });
+ });
+
+ app.get("/.well-known/jwks.json", (req, res) => {
+ res.json(jwks);
+ });
+
+ 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:
+
+ ```bash
+ node server.js
+ ```
+
+2. Test login:
+
+ ```bash
+ curl -X POST http://localhost:3000/login -H "Content-Type: application/json" -d '{"email": "user@example.com", "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)
+
+ 
+
+3. Allowlist domain or bundle ids in Access Restrictions.
+4. Navigate to the Configuration view and enable **Custom JSON Web Token**
+
+ 
+
+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.
+
+A persistent, cross-platform wallet is now created for your user.
diff --git a/docs/onboarding/21 Embedded Wallet/4 Custom Auth/3 Integrate Firebase Auth.mdx b/docs/onboarding/21 Embedded Wallet/4 Custom Auth/4 Integrate Firebase Auth.mdx
similarity index 100%
rename from docs/onboarding/21 Embedded Wallet/4 Custom Auth/3 Integrate Firebase Auth.mdx
rename to docs/onboarding/21 Embedded Wallet/4 Custom Auth/4 Integrate Firebase Auth.mdx
diff --git a/docs/onboarding/21 Embedded Wallet/5 FAQ.mdx b/docs/onboarding/21 Embedded Wallet/5 FAQ.mdx
index 1bdb9057e8..53689f6e9c 100644
--- a/docs/onboarding/21 Embedded Wallet/5 FAQ.mdx
+++ b/docs/onboarding/21 Embedded Wallet/5 FAQ.mdx
@@ -26,7 +26,7 @@ If you continue to run into a console error, please contact us with more details
thirdweb can create up to 100 wallets/second by default, and can support higher limits (up to 3,000 wallets/second) upon request.
-### Where can users see assets in their embedded wallet
+### Where can users see assets in their embedded wallet?
Users can login to their embedded wallet at https://ews.thirdweb.com/wallet and see the assets held in it.
@@ -76,13 +76,9 @@ Soon, developers will be able to toggle on the option for users to add a backup
### How is the private key managed?
-The private key is sharded into three pieces. The first piece is stored on the customer’s device, the second piece is stored in Amazon’s KMS and encrypted by the customer’s email/social auth, and the third piece is stored on Paper. At anytime, there needs to be 2/3 pieces for the private key to be reconstructed.
-
-thirdweb is non-custodial because we only have access to the third piece stored on thirdweb’s servers, and we cannot access the other two shards without the user logging into your application.
-
-Our security architecture has been audited by HackerOne and we have an ongoing bounty program to ensure vulnerabilities are being covered.
+You can learn more about the architecture of how embedded wallets are created and stored [here](https://portal.thirdweb.com/embedded-wallet/how-it-works)
### What happens if thirdweb or my database gets breached?
-Using Shamir Secret Sharing technology, your customers’ assets are safe even in the event that thirdweb or you are compromised. This is because the attacker will only be able to access 1 of the 3 shards, and that is not enough to reconstruct the private key.
+Using Shamir Secret Sharing technology, your customers’ assets are safe even if thirdweb or you are compromised. This is because the attacker will only be able to access 1 of the 3 shards, and that is not enough to reconstruct the private key.
diff --git a/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-config.png b/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-config.png
new file mode 100644
index 0000000000..771d19c1f1
Binary files /dev/null and b/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-config.png differ
diff --git a/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-flow.png b/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-flow.png
new file mode 100644
index 0000000000..7870ef8030
Binary files /dev/null and b/docs/onboarding/21 Embedded Wallet/assets/ew-custom-auth-flow.png differ
diff --git a/docs/onboarding/22 Gaming/0 Overview.mdx b/docs/onboarding/22 Gaming/0 Overview.mdx
new file mode 100644
index 0000000000..e2787c6001
--- /dev/null
+++ b/docs/onboarding/22 Gaming/0 Overview.mdx
@@ -0,0 +1,48 @@
+---
+slug: /gaming
+title: Overview
+hide_title: true
+---
+
+import QuickstartCard from "@components/QuickstartCard";
+
+# Overview
+
+thirdweb has tools that let you easily build web3 games for any platform - Browser, Native Desktop, Mobile, Console, and VR.
+
+
+
+## Features
+
+- **Seamless onboarding**: Allow users to login with their wallets, email, social logins, usernames, passkeys, or build completely invisible login experiences.
+- **Cross-platform support**. Build games on Unity, WebGL, or Unreal Engine.
+- **Account abstraction support**. Easily integrate ERC-4337 compatible smart accounts into your games, enabling seamless user experiences and interoperability
+- **Support for any EVM network.** thirdweb’s tools with any EVM-compatible network, allowing you to build games on the latest L2 chains
+- **Customizable**. Our products let you control all aspects of the user experience. For example, you can our tools to bring your own authentication system and spin up in-game embedded wallets for users.
+- **All-inclusive**. Our solutions come with prefabs, RPCs, Account abstraction infra (bundler and paymaster), fiat ramps, and storage out of the box. You get everything you need to build great games
+
+## Check Out Our Demos
+
+- [Speed Racer](https://github.com/thirdweb-example/unreal_demo)
+- [Cat Attack](https://catattack.thirdweb.com/)
+- [Web3 Warriors](https://web3warriors.thirdweb.com/)
+
+### Full reference
+
+
+
diff --git a/docs/onboarding/22 Gaming/1 Unreal Engine.mdx b/docs/onboarding/22 Gaming/1 Unreal Engine.mdx
new file mode 100644
index 0000000000..d03bc547a4
--- /dev/null
+++ b/docs/onboarding/22 Gaming/1 Unreal Engine.mdx
@@ -0,0 +1,74 @@
+---
+slug: /gaming/unreal-engine
+title: Unreal Engine
+hide_title: true
+---
+import QuickstartCard from "@components/QuickstartCard";
+
+# Quickstart
+
+In this guide, we’ll build a demo game called Speed Racer using a template. Once setup, users will be able to connect their wallet and perform on-chain actions without signing transactions or paying gas.
+
+Try it out by downloading the game using the links below
+
+
+
+
+
+
+
+## Architecture
+
+We recommend the following architecture to build production-grade games on Unreal Engine
+
+
+
+There are 2 thirdweb tools being used here
+
+- [Connect](https://portal.thirdweb.com/connect): This is used to link user wallets to your game. This step needs to be done in a browser environment.
+- [Engine](https://portal.thirdweb.com/engine): Once you have a wallet linked to a game user, you can use engine to perform all blockchain interactions.
+
+
+
+## 1. Set up Engine
+
+This example makes use of thirdweb Engine, a backend HTTP server that calls smart contracts using your managed backend wallets.
+
+You’ll need an instance running for your server to interact with the blockchain. [Learn how to set up your own Engine instance](/engine).
+
+## 2. Set up website and backend
+
+We’ll need a website for users to sign up and link their wallets, and a backend to handle wallet authentication, user registration and interaction with engine.
+
+Here’s a step by step guide to deploy your client/server:
+
+To deploy a client/server:
+
+1. Clone https://github.com/thirdweb-example/engine-express/
+2. Install client dependencies `cd client` and `yarn`
+3. Install server dependencies `cd server` and `yarn`
+4. Navigate to the root folder and run `yarn`
+5. Replace the `.env.example` in the client/server folder with your own [api key](http://thirdweb.com/create-api-key) values and engine url. Ensure your api key can be used to authenticate with your deployed engine
+6. We’ll be claiming ERC20’s from Unreal in this demo. Navigate to the [engineController.ts](https://github.com/thirdweb-example/engine-express/blob/main/server/src/controllers/engineController.ts) file, and set your backend engine wallet as well as your [Token Drop](https://thirdweb.com/thirdweb.eth/DropERC20) contract details - make sure you have claim conditions set up for your drop
+7. You can now run the client and server in two terminals using `yarn client` and `yarn server`
+8. By default, the client runs on [localhost:3000](http://localhost:3000) and the server on [localhost:8000](http://localhost:8000)
+9. Go ahead and create a user on your website, and link a wallet
+10. You are now ready to head into Unreal!
+
+## 3. Build your Unreal Engine game
+
+To simplify this part, we created a template for you with a simple script to interact with your server as per the architecture illustrated above. A level blueprint instantiates the UI, which has its own blueprint to interact with your server.
+
+Clone https://github.com/thirdweb-example/unreal_demo and navigate to `_Thirdweb/Scenes/Scene_Game` to start the level.
+
+You will be able to log in and see the output as the game polls and updates your balance whenever you collect an item while driving.
+
+All thirdweb related assets are under the `_Thirdweb` folder in your Content Browser.
\ No newline at end of file
diff --git a/docs/onboarding/22 Gaming/2 Unity.mdx b/docs/onboarding/22 Gaming/2 Unity.mdx
new file mode 100644
index 0000000000..da821873e4
--- /dev/null
+++ b/docs/onboarding/22 Gaming/2 Unity.mdx
@@ -0,0 +1,5 @@
+---
+slug: /unity
+title: Unity
+hide_title: true
+---
\ No newline at end of file
diff --git a/docs/onboarding/22 Gaming/assets/preview.png b/docs/onboarding/22 Gaming/assets/preview.png
new file mode 100644
index 0000000000..88538ee0eb
Binary files /dev/null and b/docs/onboarding/22 Gaming/assets/preview.png differ
diff --git a/docs/onboarding/22 Gaming/assets/unreal-architecture.png b/docs/onboarding/22 Gaming/assets/unreal-architecture.png
new file mode 100644
index 0000000000..4849a45d83
Binary files /dev/null and b/docs/onboarding/22 Gaming/assets/unreal-architecture.png differ
diff --git a/docs/react/Connecting Wallets.mdx b/docs/react/Connecting Wallets.mdx
index 2538f6e39d..0a7b851cff 100644
--- a/docs/react/Connecting Wallets.mdx
+++ b/docs/react/Connecting Wallets.mdx
@@ -37,6 +37,7 @@ There are two ways you connect user's wallet to your application using thirdweb'
| Coin98 Wallet | [`coin98Wallet`](/react/react.coin98) |
| Rabby Wallet | [`rabbyWallet`](/react/react.rabby) |
| Defi Wallet | [`cryptoDefiWallet`](/react/react.defiwallet) |
+| OneKey Wallet | [`oneKeyWallet`](/react/react.onekey) |
diff --git a/docs/react/hooks/core/usecontractread.mdx b/docs/react/hooks/core/usecontractread.mdx
index a165d98aea..0cb40123cc 100644
--- a/docs/react/hooks/core/usecontractread.mdx
+++ b/docs/react/hooks/core/usecontractread.mdx
@@ -119,6 +119,9 @@ function App() {
If you provide an additional argument to the hook, it will be used as the `CallOverrides` object send with your request.
+
+To include the sender's address (msg.sender) when calling view functions within your smart contract, include the property {from: 0X123} passing the relevant address.
+
```jsx
import { useContractRead, useContract, Web3Button } from "@thirdweb-dev/react";
diff --git a/docs/react/wallets/oneKeyWallet.mdx b/docs/react/wallets/oneKeyWallet.mdx
new file mode 100644
index 0000000000..a0a1aa90c8
--- /dev/null
+++ b/docs/react/wallets/oneKeyWallet.mdx
@@ -0,0 +1,91 @@
+---
+title: oneKeyWallet
+slug: /react.onekey
+displayed_sidebar: react
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+import { CustomizeWalletConfigurator } from "@components/build-wallet/CustomizeWalletConfigurator";
+
+A wallet configurator for [OneKey Wallet](/wallet/onekey-wallet) which allows integrating the wallet with React.
+
+```tsx
+import { oneKeyWallet } from "@thirdweb-dev/react";
+
+const oneKeyWalletConfig = oneKeyWallet(options);
+```
+
+## options
+
+
+ projectId (recommended)
+
+
+Your project's unique identifier that can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com).
+
+Defaults to a common thirdweb projectId. We recommend getting your own projectId at
+[cloud.walletconnect.com](https://cloud.walletconnect.com) when launching your project.
+
+```javascript
+import { oneKeyWallet } from "@thirdweb-dev/react";
+
+oneKeyWallet(
+ // highlight-start
+ {
+ projectId: "
",
+ },
+ // highlight-end
+);
+```
+
+
+
+
+ recommended (optional)
+
+
+Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).
+
+```ts
+oneKeyWallet({
+ // highlight-start
+ recommended: true,
+ // highlight-end
+});
+```
+
+
+
+
+## Usage with `ConnectWallet`
+
+To allow users to connect to this wallet using the [ConnectWallet](/react/react.connectwallet) component, you can add it to [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) prop.
+
+```tsx
+
+
+
+```
+
+## Usage with `useConnect`
+
+you can use the `useConnect` hook to programmatically connect to the wallet without using the [ConnectWallet](/react/react.connectwallet) component.
+
+The wallet also needs to be added in [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) if you want the wallet to auto-connect on next page load.
+
+```tsx
+const oneKeyWalletConfig = oneKeyWallet();
+
+function App() {
+ const connect = useConnect();
+
+ const handleConnect = async () => {
+ await connect(oneKeyWalletConfig, connectOptions);
+ };
+
+ return ...
;
+}
+```
\ No newline at end of file
diff --git a/docs/typescript/thirdwebsdk.sdk.contractdeployer.mdx b/docs/typescript/thirdwebsdk.sdk.contractdeployer.mdx
index ad019d274a..570514aa19 100644
--- a/docs/typescript/thirdwebsdk.sdk.contractdeployer.mdx
+++ b/docs/typescript/thirdwebsdk.sdk.contractdeployer.mdx
@@ -110,6 +110,7 @@ const txResult = await sdk.deployer.deployPublishedContract(
"{{publisher_address_or_ens}}",
"{{contract_name}}",
[param1, param2],
+ version,
);
```
@@ -127,9 +128,10 @@ the name of the published contract to deploy. ex: TokenERC721
array of constructor arguments for the contract.
-### version
+### version (optional)
-version of the published contract. defaults to 'latest'.
+A `string` that needs to match the version displayed in the contract's publish page - or "latest" for the latest version.
+Defaults to "latest" if not specified.
diff --git a/docs/unity/assets/connectwallet.png b/docs/unity/assets/connectwallet.png
index d0e5a6528e..99277a9dba 100644
Binary files a/docs/unity/assets/connectwallet.png and b/docs/unity/assets/connectwallet.png differ
diff --git a/docs/unity/assets/connectwalletinspector.png b/docs/unity/assets/connectwalletinspector.png
index a5f8893fc1..d410dad0f4 100644
Binary files a/docs/unity/assets/connectwalletinspector.png and b/docs/unity/assets/connectwalletinspector.png differ
diff --git a/docs/unity/assets/jwt_auth_settings.png b/docs/unity/assets/jwt_auth_settings.png
index 9bf06ec739..0e8698677b 100644
Binary files a/docs/unity/assets/jwt_auth_settings.png and b/docs/unity/assets/jwt_auth_settings.png differ
diff --git a/docs/unity/connecting-to-wallets/EmbeddedWallet.mdx b/docs/unity/connecting-to-wallets/EmbeddedWallet.mdx
index 7e6170fc37..716437d688 100644
--- a/docs/unity/connecting-to-wallets/EmbeddedWallet.mdx
+++ b/docs/unity/connecting-to-wallets/EmbeddedWallet.mdx
@@ -55,6 +55,10 @@ string address = await sdk.wallet.Connect(connection);
Allows the integration of a custom authentication flow, such as JWT, requiring the configuration of JWKS URI and AUD in the [API key settings](https://thirdweb.com/create-api-key).
+Alternatively, allows passing a generic payload that will be authenticated against your backend Auth Endpoint set in the [API key settings](https://thirdweb.com/create-api-key).
+
+You must also pass in an `encryptionKey` that will be used to encrypt the recovery share.
+
```csharp
@@ -66,8 +70,9 @@ var connection = new WalletConnection(
provider: WalletProvider.EmbeddedWallet,
chainId: 1,
authOptions: new AuthOptions(
- authProvider: AuthProvider.CustomAuth,
- authToken: "your-auth-token-here",
+ authProvider: AuthProvider.JWT,
+ jwtOrPayload: "my-jwt-token-or-payload",
+ encryptionKey: "my-encryption-key",
)
);
@@ -83,7 +88,7 @@ If using Email OTP flow, displays a modal where you can input your OTP code.
If using OAuth2 flow, opens a popup where you can login with your provider account. If successful, the popup will close and the wallet will connect.
-If using Custom JWT flow, attempts to connect directly after verifying the JWT token.
+If using Custom Auth flow, attempts to connect directly after verifying the auth token.
### Standalone
@@ -91,7 +96,7 @@ If using Email OTP flow, displays a modal where you can input your OTP code.
If using the OAuth2 flow, opens the default browser where you can login with your provider account. Connects after the login flow is complete.
-If using Custom JWT flow, attempts to connect directly after verifying the JWT token.
+If using Custom Auth flow, attempts to connect directly after verifying the auth token.
### Mobile
@@ -99,7 +104,7 @@ If using Email OTP flow, displays a modal where you can input your OTP code.
If using the OAuth2 flow, interacts with native in-app browser/authentication implementations to login with your provider account. Redirects back to the app through a deep link after the login flow is complete. Only available in builds.
-If using Custom JWT flow, attempts to connect directly after verifying the JWT token.
+If using Custom Auth flow, attempts to connect directly after verifying the auth token.
## Miscellaneous
diff --git a/docs/unity/connecting-to-wallets/SmartWallet.mdx b/docs/unity/connecting-to-wallets/SmartWallet.mdx
index 9cbe29fe94..2de7e4a83d 100644
--- a/docs/unity/connecting-to-wallets/SmartWallet.mdx
+++ b/docs/unity/connecting-to-wallets/SmartWallet.mdx
@@ -52,7 +52,7 @@ They also work with any wallet provider as the EOA, but it is recommended to use
You would then be able to login to the exact same persistent EOA and smart wallet address across your apps, and even across different platforms.
-You can also create session keys, allowing new signers to interact with the smart wallet without being the admin.
+You can also create session keys (revokable), allowing new signers to interact with the smart wallet without being the admin.
You may also add/remove admins.
```csharp
@@ -61,16 +61,38 @@ using Thirdweb;
// Reference to your Thirdweb SDK
var sdk = ThirdwebManager.Instance.SDK;
-// Create a session key to add a temporary signer
-var createSessionResult = await sdk.wallet.CreateSessionKey("0xSignerAddress", ...options);
+// Create a session key
+string signerAddress = "0xSignerAddress";
+List approvedTargets = new List { "0xTargetAddress" };
+string nativeTokenLimitPerTransactionInWei = "0";
+string permissionStartTimestamp = "0";
+string permissionEndTimestamp = Utils.GetUnixTimestampIn10Years().ToString();
+string reqValidityStartTimestamp = "0";
+string reqValidityEndTimestamp = Utils.GetUnixTimestampIn10Years().ToString();
+
+var createSessionResult = await sdk.wallet.CreateSessionKey(
+ "0xSignerAddress",
+ approvedTargets,
+ nativeTokenLimitPerTransactionInWei,
+ permissionStartTimestamp,
+ permissionEndTimestamp,
+ reqValidityStartTimestamp,
+ reqValidityEndTimestamp
+);
+
+// Get a list of current signers with permission details
+List signers = await sdk.wallet.GetAllActiveSigners();
+
+// Revoke a session key
+var revokeSessionResult = await sdk.wallet.RevokeSessionKey("0xSignerAddress");
-// Alternatively, you can add an admin
+// Add admin
var addAdminResult = await sdk.wallet.AddAdmin("0xSignerAddress");
-// Or remove an admin
+// Remove admin
var removeAdminResult = await sdk.wallet.RemoveAdmin("0xSignerAddress");
-// This pairs well with the `smartWalletAccountOverride` option to connect to a specific smart wallet
+// These features pair well with the `smartWalletAccountOverride` option to connect to a specific smart wallet
var connection = new WalletConnection(
...options,
smartWalletAccountOverride: "0xSmartWalletAddress"
diff --git a/docs/unity/prefabs/ConnectWallet.mdx b/docs/unity/prefabs/ConnectWallet.mdx
index 21988c7a8f..5c9aaf2613 100644
--- a/docs/unity/prefabs/ConnectWallet.mdx
+++ b/docs/unity/prefabs/ConnectWallet.mdx
@@ -28,21 +28,16 @@ From the `Inspector` window, you can configure the options for the `ConnectWalle
The list of wallets you want to support.
Each wallet you provide appears as a button in the dropdown.
-Supports `EmbeddedWallet`, `MetaMask`, `Coinbase`, `WalletConnect`, `MagicLink`, `LocalWallet`, `Paper`, `SmartWallet`, `HyperPlay`, `Injected` (window.ethereum).
+Supports `EmbeddedWallet`, `MetaMask`, `Coinbase`, `WalletConnect`, `LocalWallet`, `HyperPlay`, `Injected` (window.ethereum).
Some wallet providers may not be supported on some native platforms.
-### Personal Wallet
+You can turn any of these wallets into a `SmartWallet` by checking the `Use Smart Wallets` checkbox.
-When using Smart Wallets, you can set the EOA Wallet Provider that you'd like to initiate them with. Defaults to `LocalWallet`.
+### Use Smart Wallets
-### Custom Callbacks
+When checked, the wallet provider will be wrapped in a `SmartWallet` which will allow you to use [SmartWallet features](/unity/wallet/SmartWallet).
-Custom logic to run whenever an event occurs on the button, including:
+### Events
-- `OnConnected`: Triggered when the user connects their wallet successfully.
-- `OnDisconnected`: Triggered when the user disconnects their wallet successfully.
-- `OnSwitchNetwork`: Triggered when the user switches networks successfully.
-- `OnFailedConnect`: Triggered when the user fails to connect their wallet.
-- `OnFailedDisconnect`: Triggered when an error occurs after attempting to disconnect a wallet.
-- `OnFailedSwitchNetwork`: Triggered when an error occurs after attempting to switch networks.
+You can set up events to be triggered when the user connects, switches network or disconnects their wallet, from the inspector.
diff --git a/sidebars/onboarding.js b/sidebars/onboarding.js
index 22f3898540..950218c827 100644
--- a/sidebars/onboarding.js
+++ b/sidebars/onboarding.js
@@ -98,6 +98,11 @@ const sidebars = {
label: "Signature Minting",
href: "/signature-minting",
},
+ {
+ type: "link",
+ label: "Gaming",
+ href: "/gaming",
+ },
{
type: "link",
label: "RPC Edge",
@@ -255,6 +260,13 @@ const sidebars = {
},
],
+ gaming: [
+ {
+ type: "autogenerated",
+ dirName: "22 Gaming",
+ },
+ ],
+
smartWallet: [
{
type: "autogenerated",
diff --git a/src/theme/DocSidebarItem/Link/index.js b/src/theme/DocSidebarItem/Link/index.js
index 704d8b471a..3c9db84f06 100644
--- a/src/theme/DocSidebarItem/Link/index.js
+++ b/src/theme/DocSidebarItem/Link/index.js
@@ -42,8 +42,8 @@ export const iconMapping = {
Engine: "/assets/product/sdk.png",
"Bundler & Paymaster": "/assets/wallets/smart-wallet.svg",
"RPC Edge": "/assets/product/sdk.png",
- Guides: "/assets/resources/guides.svg",
"NFT Checkouts": "/assets/product/checkout.png",
+ Gaming: "/assets/product/sdk.png",
};
export default function DocSidebarItemLink({
diff --git a/src/theme/DocSidebarItems/index.js b/src/theme/DocSidebarItems/index.js
index 883dddf9ad..74cda3abda 100644
--- a/src/theme/DocSidebarItems/index.js
+++ b/src/theme/DocSidebarItems/index.js
@@ -76,7 +76,7 @@ function DocSidebarItems({ items, ...props }) {
},
{
title: "Solutions",
- items: ["Signature Minting"],
+ items: ["Signature Minting", "Gaming"],
},
{
title: "Resources",
diff --git a/static/assets/languages/unreal.jpg b/static/assets/languages/unreal.jpg
new file mode 100644
index 0000000000..0a5ac84354
Binary files /dev/null and b/static/assets/languages/unreal.jpg differ
diff --git a/static/assets/solutions/apple-logo.png b/static/assets/solutions/apple-logo.png
new file mode 100644
index 0000000000..a9b216ef29
Binary files /dev/null and b/static/assets/solutions/apple-logo.png differ
diff --git a/static/assets/solutions/windows-logo.png b/static/assets/solutions/windows-logo.png
new file mode 100644
index 0000000000..5daf592d47
Binary files /dev/null and b/static/assets/solutions/windows-logo.png differ
diff --git a/static/assets/wallets/onekey.png b/static/assets/wallets/onekey.png
new file mode 100644
index 0000000000..009bda5370
Binary files /dev/null and b/static/assets/wallets/onekey.png differ