Stytch Account Setup
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.
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.
2. SDK Configuration
First, click the "Enable SDK" button and select "Enable" on the confirmation dialogue.
Second, expand the "Domains" section and add the base domains that you added to the redirect URLs. (In our example, http://localhost:3000)
Third, expand the "Email magic links" section and toggle on Enable the LoginOrCreate Flow, Enable the Send Flow, and Enable PKCE.
Finally, if you would like enable OAuth login methods for the SDK, you can do that now.
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.
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.
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
Step 4: Integrate Stytch Into Your Chord Storefront
We have serveral guides on how to integrate/migrate Stytch into your storefront.
- Next.js ↔️ Stytch Migration Guide
- Gatsby ↔️ Stytch Migration Guide