Stytch Auth + Crossmint Wallets example

Create in under 5 minutes a fully functional user account system, with magic links and google auth, where each user has NFT custodial wallets created. This sample code uses Stytch for authentication and Crossmint for wallet creation.

1. Stytch set up

Stytch Dashboard

1. Create a Stytch account. Once your account is set up a Project called "My first project" will be automatically created for you.

2. Within your new Project, navigate to SDK configuration, and make the following changes:

   • Click Enable SDK.
   • Under Authorized environments add the domain http://localhost:3000.
   
   • Within the Email Magic Links drawer, toggle on Enable the LoginOrCreate Flow.
   
   • Toggle on OAuth.
   

3. Navigate to Redirect URLs, and add http://localhost:3000 as the types Login and Sign-up.

4. Navigate to OAuth, and set up login for Google in the Test environment. Follow all the instructions provided in the Dashboard. If you are not interested in OAuth login you can skip this step. However, the Continue with Google button in this application will not work.

5. Finally, navigate to API Keys, and copy your public_token, STYTCH_PROJECT_ID, and STYTCH_SECRET. You will need this value later on.

On your machine

In your terminal clone the project and install dependencies:

git clone https://github.com/Crossmint/stytch-crossmint.git
cd stytch-crossmint
yarn

Next, create an .env.local file at the project root folder, and copy paste the following line inside:

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=YOUR_STYTCH_PUBLIC_TOKEN_HERE
# For example, "NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-123abcd-1234-1234-abcd-123123abcabc"

2. Crossmint set up

Now we are going to sign up to Crossmint and create an API key that allows us to create and manage wallet for our users. During development, we're going to create wallets in the free sandbox environment ('staging').

In the Crossmint console

1. Go to staging.crossmint.com/console and follow the steps to create an account.

2. Navigate to API keys and click on New API Key. Then check the wallets.read and wallets.create scopes -- this will give your API key permission to create and manage crypto wallets for your users. Finally save your new key and copy the CLIENT SECRET and Project ID values for later.

On your machine

Go back to your project, open again the .env.local file, and enter the following three lines:

CROSSMINT_BASEURL=https://staging.crossmint.com
CROSSMINT_X_CLIENT_SECRET=YOUR_CROSSMINT_CLIENT_SECRET_HERE
CROSSMINT_X_PROJECT_ID=YOUR_CROSSMINT_PROJECT_ID_HERE

And then save.

Please note: make sure the clent secret doesn't get leaked, as it would allow others to create wallets for your users.

Running locally

After completing the setup steps above the application can be run with the command:

yarn dev

The application will be available at http://localhost:3000.

You'll be able to login with Email Magic Links or Google OAuth and see your Stytch User object, Stytch Session, and see how logging out works.

Deploy via Vercel

Final result:

Authentication page

Post-login page: