This example application demonstrates how one may use Stytch within the T3 stack.
This project uses Stytch's Node SDK which provides a fully typesafe and backend driven authentication pattern. This allows you to own the frontend and authentication to live alongside your business logic in the backend.
This application features One-Time Passcodes (OTP) sent via either email or SMS. You can use this application's source code as a learning resource, or use it as a jumping off point for your own project. We are excited to see what you build with Stytch!
Follow the steps below to get this application fully functional and running using your own Stytch credentials.
-
Create a Stytch account. Once your account is set up a Project called "My first project" will be automatically created for you. If you already have a Stytch account, create a new Project.
-
Now navigate to API Keys. You will need the
project_id
andsecret
values found on this page later on.
In your terminal clone the project and install dependencies:
# If necessary, install pnpm
brew install pnpm
git clone https://github.com/stytchauth/stytch-t3-example.git
cd stytch-t3-example
pnpm i
Next, create .env
file by running the command below which copies the contents of .env.template
.
cp .env.template .env
Open .env
in the text editor of your choice, and set the environment variables using the project_id
and secret
found on API Keys. Leave the STYTCH_PROJECT_ENV
value as test
.
# This is what a completed .env file will look like
STYTCH_PROJECT_ENV=test
STYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234
STYTCH_SECRET=secret-test-12345678901234567890abcdabcd
DATABASE_URL="file:./dev.db"
After completing all the set up steps above the application can be run with the command:
# Initialize the database
pnpm prisma:init
# Run the app
pnpm dev
The application will be available at http://localhost:3000
.
You'll be able to login with Email OTP or SMS OTP and see your Stytch User object, Stytch Session, and see how logging out works.
This example app showcases a small portion of what you can accomplish with Stytch. Here are a few ideas to explore:
- Add additional login methods like Passwords.
- Secure your app further by building MFA authentication using methods like WebAuthn.
Join the discussion, ask questions, and suggest new features in our Slack community!
Check out the Stytch Forum or email us at support@stytch.com.
Built by Delicious Simplicity and Stytch 💙. Open a pull request or issue to contribute!