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)!
Onboard, authenticate, and engage your users with Stytch’s APIs. Improve security and user experience with flexible, passwordless authentication solutions.
PlanetScale is the only serverless database platform you can start in seconds and scale indefinitely.
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.
- 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.
- The
pscale deploy-request deploy <database-name> <deploy-request-number>
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.
Learn more about some of Stytch and Planetscale products used in this example app: