Augmenting existing auth flow

Integrate Stytch email magic links into your existing login flow. It’s easy to replace your existing login flow entirely or add an alternative login method alongside your existing options.

Here's an example of a login component when Stytch is the only login method.

Since each user needs to be created with Stytch, check if the user logging in or signing up has a Stytch user ID. If they do not, create a Stytch user for them and save the user ID from the response. This needs to happen once per user. We recommend saving the Stytch user ID in a new column of your users table or within a new table linking your users with their Stytch user ID.

const stytch = require("stytch")

const client = new stytch.Client({
    project_id: "PROJECT_ID",
    secret: "SECRET",
    env: stytch.envs.test,
  }
);

const params = {
    email: "sandbox@stytch.com",
};
client.users.create(params)
    .then(resp => {
        console.log(resp)
    })
    .catch(err => {
        console.log(err)
    });

Add the login and signup URLs to the project's list of predefined redirect URLs in the dashboard. For more information on why this step is necessary, please check out the documentation here.

By default, all redirect URLs are set to http://localhost:3000 for the Test environment.

When a user wants to login using Stytch, send a request to send an email magic link. If a user is signing up for the first time, you can send this request after receiving the user ID from the CreateUser response. Either the login_magic_link_url or signup_magic_link_url request parameter is the URL the user will be redirected to from the email. The signup_magic_link_url will be used if the user is in a pending state due to using CreateUser's create_user_as_pending request parameter.

const stytch = require("stytch")

const client = new stytch.Client({
    project_id: "PROJECT_ID",
    secret: "SECRET",
    env: stytch.envs.test,
  }
);

const params = {
    email: "sandbox@stytch.com",
    login_magic_link_url: "https://example.com/login",
    signup_magic_link_url: "https://example.com/signup"
};
client.magicLinks.email.send(params)
    .then(resp => {
        console.log(resp)
    })
    .catch(err => {
        console.log(err)
    });

When the user opens the email, they are prompted to log in by clicking either the login_magic_link_url or signup_magic_link_url from the SendMagicLinkByEmail request. The url will contain a token in the query params that you will use to send the AuthenticateMagic request. If the response is a 200, the user is verified and can be logged in.

const stytch = require("stytch")

const client = new stytch.Client({
    project_id: "PROJECT_ID",
    secret: "SECRET",
    env: stytch.envs.test,
  }
);

// Replace with token from request
const token = "SeiGwdj5lKkrEVgcEY3QNJXt6srxS3IK2Nwkar6mXD4="

client.magicLinks.authenticate(token)
    .then(resp => {
        console.log(resp)
    })
    .catch(err => {
        console.log(err)
    });