Building an invite user flow

Integrate Stytch to easily invite and authenticate users. When a user invites someone to their team, you'll send them a magic link invite with Stytch. The invited user will have a pending status until they click the link to authenticate. At this point, they will become an active user and you can log them in. For an example of how to build this, see our example app.

If you don't already have one, you'll need to build an invite user view for your app.

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 you want to send an invitation to a user, send a InviteByEmail request. The user will receive an email explaining they've been invited. This will create a Stytch user with an invited status. Remember to save the user ID from the response. The invite_magic_link_url request parameter is the URL the user will be redirected to from the email.

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",
    invite_magic_link_url: "https://example.com"
};
client.magicLinks.email.invite(params)
    .then(resp => {
        console.log(resp)
    })
    .catch(err => {
        console.log(err)
    });

When the user opens the email, they are prompted to log in for the first time by clicking the provided invite_magic_link_url from the InviteByEmail request. The url will contain a token in the query params that you will use to send the AuthenticateMagic request. The user’s status will be set to active as well. 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)
    });

After the user has accepted their invitation, you can send a magic link to authenticate a user by sending a SendMagic request.