Custom Auth Server

Learn how to integrate your auth backend with our in-app 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 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.

5 minute quickstart

  • Step 1

    Navigate to Wallets > In-App Wallets in the thirdweb dashboard.

  • Step 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.

  • Step 3

    Allowlist domain or bundle IDs in Access Restrictions.

  • Step 4

    Navigate to the Configuration view and enable Custom Auth Endpoint

  • Step 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.

  • Step 6

    Save the configuration.
  • Step 7

    Copy the client ID.
  • Step 8

    In your preferred thirdweb client SDK, pass the payload you retrieved from logging in to the server.

You can now auth into the wallet and use it to sign transactions like so (see use your own auth for more):

import { inAppWallet } from "thirdweb/wallets";
import { useConnect } from "thirdweb/react";
const { connect } = useConnect();
const handlePostLogin = async (jwt: string) => {
await connect(() => {
const wallet = inAppWallet();
wallet.connect({
client,
strategy: "auth_endpoint",
payload: JSON.stringify({ userId: "ANY_RANDOM_ID_HERE" }),
encryptionKey: "your-encryption-key",
});
return wallet;
});
};

You can set your encryptionKey in either a secret env variable or ask the user to enter a password for it.

** Do not hardcode the encryptionKey in your code. **

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

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:

  • Handle login for the user into your application.
  • Have a way to get a public identifier for the user.
  • 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 you register as your auth endpoint on the thirdweb dashboard.

Here's a high-level diagram:

  • Step 1

    Create a new directory for your project and navigate to it in your CLI

    mkdir custom-auth-server
    cd custom-auth-server
  • Step 2

    Initialize a new Node.js application

    npm init -y

    OR

    yarn init -y

Create the Server:

In the custom-auth-server directory, create a file at the root named server.js and paste the following:

const express = require("express");
const fs = require("fs");
const app = express();
const PORT = process.env.PORT || 3000;
const users = [
{ id: 1, email: "user@example.com", password: "password123" },
];
app.use(express.json());
// This is what your app calls to log in 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(
(u) => u.email === email && u.password === password,
);
if (!user)
return res.status(401).send({ message: "Invalid credentials" });
res.send({ payload: user.id });
});
// This is a sample endpoint that you would register on the thirdweb dashboard for us to verify the payload
app.post("/thirdweb-will-call-this", (req, res) => {
const { payload } = req.body;
if (!payload)
return res.status(401).send({ message: "Invalid credentials" });
// 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, () => {
console.log(`Server started on port ${PORT}`);
});

Test Locally

  • Start the server:

    node server.js
  • Test login:

    curl -X POST http://localhost:3000/login -H "Content-Type: application/json" -d '{"email": "user@example.com", "password": "password123"}'

Deploy

To deploy the server, you can use services such as Zeet or Docker.

Integrate In-App Wallets

Refer top the quickstart above to integrate the embedded wallet into your application.