[Optional] Set up authentication

Crossmint wallets work out of the box with your authentication solution. Don’t have an auth solution already? We’ve integrated with Stytch, a developer first authentication solution, to help you cover all the bases. Build a fully working, NFT-wallet-backed application, complete with user authentication, in a matter of minutes.

Repository

Want to get started right away? See our open source repo, which can be easily forked and deployed for your app!

The below guide is a 5 minute, step-by-step walkthrough to:

1. Set up Stytch authentication in your app.
2. Create Crossmint wallets based on Stytch authentication on any supported chain.

Setup

Repository setup:

1. Download the stytch-crossmint repository
2. Open the project in your favorite IDE.
3. In the root directory of the project, rename the file called .env.template to .env.local. We’ll be filling out this file throughout the setup process.

Stytch setup:

1. Create a Stytch account. When prompted between “Consumer Authentication” and “B2B Authentication, select the “Consumer Authentication” option.
2. Navigate to Frontend SDKs on the side-bar.

a. Stytch offers both Test and Live environments. In this example, we’ll be working with only the Test environment. Select Test environment (should be the default option).
b. Click the Enable SDK button and confirm the prompt. This will create your Stytch API keys

3. Add an authorized environment:
   a. Click on the “+ Add” button
   b. Add your site/vercel or local domain to be authorized and click Save

4. Add your api key to the project
   a. Navigate to “API Keys”

b. Select the Test environment and copy the Public Token located at the bottom of the page.

c. In the crossmint-stytch project, paste the copied value for the variable NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN in the .env.local file

Example: NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-xxxxx…

Crossmint Setup:

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

1. Go to staging.crossmint.com/console and sign in / create an account.

2. Navigate to API keys and create a New API Key with scope for wallets.read and wallets.create.

Finally save your new key and copy the CLIENT SECRET and Project ID values for later.

3. In the crossmint-stytch project, set the value of the following three keys in the .env.local file:

• CROSSMINT_BASEURL
• CROSSMINT_X_CLIENT_SECRET
• CROSSMINT_X_PROJECT_ID

Example:

CROSSMINT_BASEURL=https://staging.crossmint.com
CROSSMINT_X_CLIENT_SECRET=sk_test.xxxxxx
CROSSMINT_X_PROJECT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Once entered, save the file.

📘

Please note

Crossmint wallet APIs are server-side ONLY. Make sure your client secret doesn't get leaked, as it would allow others to create wallets and manage assets for your users.

Running locally

Run the following command to get the project up and running:
yarn start

You can view your locally hosted site on http://localhost:3000