Stytch + Planetscale Example App

This is a Stytch + Planetscale project bootstrapped with create-next-app.

This example app was created to demonstrate a lightweight fullstack user administration app using Planetscale's serverless MYSQL database and Stytch's authentication + session management APIs.

If you run into any problems or need some help while working on your Stytch + Planetscale integraiton, reach out to us at support@stytch.com or ask in our community Slack)!

Stytch

Onboard, authenticate, and engage your users with Stytch’s APIs. Improve security and user experience with flexible, passwordless authentication solutions.

Planetscale

PlanetScale is the only serverless database platform you can start in seconds and scale indefinitely.

Getting Started

Setting up Stytch

After signing up for Stytch, you'll need your Project's project_id, secret, and public_token. You can find these in the API keys tab.

Once you've gathered these values, add them to a new .env.local file. Example:

cp .env.template .env.local
# Replace your keys in new .env.local file

Next, add http://localhost:3000/api/authenticate_magic_link as a login and sign-up magic link URL to the Stytch Dashboard. Stytch, for security purposes, verifies your magic link URLs before they are sent.

Setting up Planetscale

Setup database

Install Planetscale CLI and authenticate the CLI

pscale auth login

Create a new database

pscale database create <database-name>

Next you'll need to create a Planetscale service token to connect your local app to your database.
- Go to the Service tokens page in your Planetscale dashboard and click on New service token.
- Give it a name and create it.
Now you'll enter your service token details into your .env.local file.

PLANETSCALE_TOKEN # The service token that you created, starts with pscale_tkn
PLANETSCALE_TOKEN_NAME # The id for the token, should look like ihk9lqudel8z
PLANETSCALE_ORG # This is your Planetscale organization name, i.e. the name you chose when you created your account
PLANETSCALE_DB # The name of your database, i.e. what you substituted above for <database_name>

Now, create a development branch

pscale branch create <database-name> <branch-name>

Connect to your branch

# This opens the planetscale mysql shell
pscale shell <database-name> <branch-name>

Create the user table

CREATE TABLE users (
  id int NOT NULL AUTO_INCREMENT PRIMARY KEY,
  name varchar(255),
  email varchar(255) NOT NULL
);

Create a deploy request

# This is synonymous with opening a pull request
pscale deploy-request create <database-name> <branch-name>

Find the <deploy-request-number>

pscale deploy-request list <database-name>

Deploy the deploy request
- The <deploy-request-number> will be a whole number, e.g. 1.

pscale deploy-request deploy <database-name> <deploy-request-number>

Running the example app

Install dependencies by running

npm install
# or
yarn install

Replace your-db-name on line #6 in the package.json with the name of your planetscale database name.

You can run a development server using:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

Documentation

Learn more about some of Stytch and Planetscale products used in this example app:

stytchauth/stytch-planetscale-example