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.

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" }),
    });
    return wallet;
  });
};

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.

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:

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}`);
});

• 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"}'
  

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

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