Skip to main content
Our frontend SDK provide automatic session management, prebuilt login or signup, multi-step flow handling, and more. They can also be used alongside our backend API or SDKs.

Quickstart

This quickstart guides you through building a login or signup flow. Select a framework:
1

Before you start

  • Have your project_id and secret_key from your Stytch project & environment.
  • Add http://localhost:3000/authenticate as a redirect URL in your Dashboard.
2

Install the Node.js SDK and configure API keys

  1. Install the SDK:
npm
npm install stytch express express-session
  1. Then add your Stytch API keys to your project’s .env file:
.env
STYTCH_PROJECT_ID="YOUR_STYTCH_PROJECT_ID"
STYTCH_SECRET="YOUR_STYTCH_PROJECT_SECRET"
# Use your Project's 'live' or any available 'test' credentials
3

Set up your app and login routes

  1. Initialize the Stytch client with your environment variables.
  2. Create a /login route that takes in a user’s email address and initiates the login or signup flow.
POST '/login'
const express = require('express');
const session = require('express-session');
const stytch = require('stytch');

const app = express();
app.use(express.json());
app.use(session({
  resave: true,
  saveUninitialized: false,
  secret: 'session-signing-secret',
}));

const stytchClient = new stytch.Client({
  project_id: process.env.STYTCH_PROJECT_ID,
  secret: process.env.STYTCH_SECRET,
});

app.post('/login', async (req, res) => {
  const params = {
    email: req.body.email,
    login_magic_link_url: "http://localhost:3000/authenticate",
    signup_magic_link_url: "http://localhost:3000/authenticate",
  };
  const resp = await stytchClient.magicLinks.email.loginOrCreate(params);
  res.json(resp);
});
4

Add a route to handle Stytch's redirect callback

  1. Stytch calls your authenticate redirect URL with a token to complete the flow.
  2. Add an /authenticate route to mint a session:
GET '/authenticate'
app.get('/authenticate', async (req, res) => {
  const token = req.query.token;
  const resp = await stytchClient.magicLinks.authenticate({
    token,
    session_duration_minutes: 60,
  });

  req.session.session_jwt = resp.session_jwt;
  res.redirect('/dashboard');
});
5

Add a session-protected route

  1. Create a helper method that authenticates a session.
  2. Use the method to gate any protected route.
GET '/dashboard'
app.get('/dashboard', async (req, res) => {
  const sessionJWT = req.session.session_jwt;
  if (!sessionJWT) {
    res.send("Log in to view this page");
    return;
  }

  const resp = await stytchClient.sessions.authenticate({
    session_jwt: sessionJWT,
  });
  if (resp.status_code !== 200) {
    req.session.session_jwt = undefined;
    res.send("Log in to view this page");
    return;
  }

  res.send("You're logged in.");
});
6

Full completed example:

const express = require('express');
const session = require('express-session');
const stytch = require('stytch');

const app = express();
app.use(express.json());
app.use(session({
  resave: true,
  saveUninitialized: false,
  secret: 'session-signing-secret',
}));

const stytchClient = new stytch.Client({
  project_id: process.env.STYTCH_PROJECT_ID,
  secret: process.env.STYTCH_SECRET,
});

app.post('/login', async (req, res) => {
  const params = {
    email: req.body.email,
    login_magic_link_url: "http://localhost:3000/authenticate",
    signup_magic_link_url: "http://localhost:3000/authenticate",
  };
  const resp = await stytchClient.magicLinks.email.loginOrCreate(params);
  res.json(resp);
});

app.get('/authenticate', async (req, res) => {
  const token = req.query.token;
  const resp = await stytchClient.magicLinks.authenticate({
    token,
    session_duration_minutes: 60,
  });

  req.session.session_jwt = resp.session_jwt;
  res.redirect('/dashboard');
});

app.get('/dashboard', async (req, res) => {
  const sessionJWT = req.session.session_jwt;
  if (!sessionJWT) {
    res.send("Log in to view this page");
    return;
  }

  const resp = await stytchClient.sessions.authenticate({
    session_jwt: sessionJWT,
  });
  if (resp.status_code !== 200) {
    req.session.session_jwt = undefined;
    res.send("Log in to view this page");
    return;
  }

  res.send("You're logged in.");
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

Test your application

  • Run your application and send a POST request to the /login endpoint with your email address.
  • You should receive an email magic link in your inbox.
  • Click the link to finish the login or signup flow.

Next steps