This is a demo application that uses Stytch to authenticate users and generate bot photos using AI to demonstrate the capabilities of Stytch in a real-world application. The application uses Stytch's Email Magic Links and Google OAuth to authenticate users. Once authenticated, users can access the application and see their generated photos, download and share on social media or print.
The application is built with Next.js 13, Tailwind CSS, and TypeScript. It uses Stytch's JavaScript SDK to authenticate users and manage sessions.
The application flow:
- An app admin messages a photo to a Twilio number set up to receive MMS messages and call the
/api/getAIPhotosendpoint. - The
/api/getAIPhotosendpoint calls the Replicate API to generate bot photos and the ImageKit API to store and serve images and replies with a "photo code" to be used after signup to associate a user with a photo. - Users can sign up or log in with Email Magic Links or Google OAuth by visiting the deployed application at https://stytch-not-a-bot.com
- After signing up or logging in, users can enter the "photo code" they received to see their generated photos.
- Users can download, share on social media, or print their generated collage of photos.
Twilio is used to receive MMS messages and call the /api/getAIPhotos endpoint. Replicate hosts the TencentARC/PhotoMaker model to generate bot photos a photo and a prompt. ImageKit is used to store and serve images as well as dynamically assemble the collage. Sentry is used for error tracking. The application is deployed on Fly.io. Neon is used as a Serverless Postgres database for storing data for the application. Ngrok is used for local development and testing.
Visit Twilio and create an account. You will need to set up a Twilio phone number to receive MMS messages. You will also need your Twilio Account SID and Auth Token and update the .env.local file with these values:
TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
Visit Replicate and create an account. Find the API token in your account settings and update the .env.local file with this value:
REPLICATE_API_TOKEN=
Visit Neon and create an account. You will need to create a database and get the database URL and update the .env.local file with this value:
DATABASE_URL=
Visit ImageKit and create an account. You will need to get your public key, private key, and URL endpoint and update the .env.local file with these values:
IMAGEKIT_PUBLIC_KEY=
IMAGEKIT_PRIVATE_KEY=
IMAGEKIT_URL_ENDPOINT=
Visit Sentry and create an account. You will need to get your DSN and Auth Token and update the .env.local file with these values:
SENTRY_DSN=
SENTRY_AUTH_TOKEN=
Visit Ngrok and create an account. You will need to get your Ngrok host and update the .env.local file with this value:
NGROK_HOST=
Visit Fly.io and create an account. You will need to get your Fly.io API token and update the .env.local file with this value:
HOSTED_URL=
Install the Fly CLI:
curl -L https://fly.io/install.sh | shLaunch the app on Fly:
fly launchImport secrets to Fly from .env.local:
fly secrets import < .env.localDeploy the app:
npm run fly:deployThis example application demonstrates a real-world application using several services including Stytch within a Next.js 13 application using the new App Router. If you'd like to see an example of Stytch with Next.js's Page Router, you can find it here.
In Next.js 13's App Router, you may use both Client and Server components. This example app primarily uses Client components, however you can see an example of a Server component in /src/components/Authenticate.js. Our Next.js SDK is compatible with Client components, so anywhere you use it, ensure that you include 'use client' at the top of the component. If you'd like to use Server components, you may use our Node Backend SDK to power your authentication flow.
This application features Email Magic Links and Google OAuth. 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.
-
Within your new Project, navigate to SDK configuration, and click Enable SDK.
-
Navigate to OAuth, and enable login for Google in the Test environment. Config will be done for you automatically in Test.
-
Finally, navigate to API Keys. You will need the
project_id,secret, andpublic_tokenvalues found on this page later on.
In your terminal clone the project and install dependencies:
git clone https://github.com/stytch/stytch-not-a-bot-demo.git
cd stytch-not-a-bot-demo
# Install dependencies, using npm.
npm iNext, create .env.local file by running the command below which copies the contents of .env.template.
cp .env.template .env.localOpen .env.local in the text editor of your choice, and set the environment variables using the project_id, secret, and public_token found on API Keys. Leave the STYTCH_PROJECT_ENV value as test.
# This is what a completed .env.local file will look like
STYTCH_PROJECT_ENV=test
STYTCH_PROJECT_ID=project-test-00000000-0000-1234-abcd-abcdef1234
NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=public-token-test-abcd123-0000-0000-abcd-1234567abc
STYTCH_SECRET=secret-test-12345678901234567890abcdabcd
After completing all the set up steps above the application can be run with the command:
npm run devThe application will be available at http://localhost:3000.
You'll be able to login with Email Magic Links, Google OAuth, and see your Stytch User object, Stytch Session, and see how logging out works.
Join the discussion, ask questions, and suggest new features in our Slack community!
Check out the Stytch Forum or email us at [email protected].