Chord OMS
...
Authentication
Stytch

Stytch Account Setup

10min

Step 1: Create Your Account

You, as the customer, are completely in control of your Stytch account. By working with Chord, we can offer you a service credit of $1,000. To see if you are elgible, fill out this form. If you have any questions please reach out Brandon Huang.

Otherwise, visit Stytch and follow the steps to create an account.

Step 2: Configure The Stytch Project

1. Add Redirect URLs

You will need to add a redirect URL for each callback location you plan to use. This is the URL that Stytch will navigate to when the user clicks the link from their email.

We recommend using www.your-site.com/authenticate. You will need to add a redirect URL for each action you would like to use. (Login, Sign-up, Invite, and Reset Password)

For example, if you want to allow users to login or sign-up for an account on http://localhost:3000, you need to add http://localhost:3000/authenticate to the Login and the Sign-up sections.

Document image


One thing to note is that Stytch segregates it's test and production level accounts. For security purposes, you should have your non-production domains in the test environment and your production domains in the live environment.

First, click the "Enable SDK" button and select "Enable" on the confirmation dialogue.

Document image


Second, expand the "Domains" section and add the base domains that you added to the redirect URLs. (In our example, http://localhost:3000)

Document image


Third, expand the "Email magic links" section and toggle on Enable the LoginOrCreate Flow, Enable the Send Flow, and Enable PKCE.

Document image


Finally, if you would like enable OAuth login methods for the SDK, you can do that now.

Document image


It should be noted that you will need to do these steps for both the test and live environments!

3. Configure Session Length

Stytch has a configurable max session length. It defaults to 60 minutes, which we at Chord feel is way too short, given the limited scope that authentication confers for Chord's customer endpoints. The maximum that Stytch allows is 90 days and can be configured per environment, which allows for more rapid logouts as a part of development without impacting your customers.

This is in the SDK section of the admin panel
This is in the SDK section of the admin panel


Please note that this is the maximum session duration and that you must also set this limit when initializing chord-stytch.

4. (Optional) Configure OAuth

If you would like to provide your customers with the ability to login with services like Google, Facebook, Amazon and many more, Stytch offers a beavy of OAuth login options that can be easily integrated into your login form.

To set it up, follow the instructions that Stytch provides you as a part of their OAuth provider onboarding flows.

Document image


Step 3: Configure Chord OMS To Use Stytch

In order for your customers to use Stytch authentication, you must provide Stytch's keys as environment variables. These variables can be added at any time, as a seperate environment variable controls with authentication method is used.

To set environment variables in the OMS, login to the OMS and navigate to Settings > Stores and the environment variables are at the bottom of the page.

The environment variables you must set are:

  • AUTH_PROVIDER - set to stytch when you are ready to go live with Stytch
  • STYTCH_ENV - must be either test or live
  • STYTCH_PROJECT_ID - the project ID for the environment, which can be found here
  • STYTCH_SECRET - the secret key for the environment, which can be found here
The subset of Stytch related environment variables in the Chord OMS
The subset of Stytch related environment variables in the Chord OMS


Step 4: Integrate Stytch Into Your Chord Storefront

We have serveral guides on how to integrate/migrate Stytch into your storefront.