website logo
Navigate through spaces
⌘K
OVERVIEW
ORDER MANAGEMENT (OMS)
CONTENT MANAGEMENT (CMS)
DATA
CUSTOMER LIFETIME REVENUE
Customer Lifetime Revenue Explanation
Customer Lifetime Revenue and Purchase Likelihood
Recency Frequency and Monetary
CLR and RFM Data Table Glossary
RFM and CLR in the Hub
LOOKER
Modifying a Dashboard
Timestamp differences between Looker, OMS and Shopify
How to create custom calculations in Looker
Looker and Shopify data models
Custom fields
How to 'Save and Schedule' reports
Creating Custom Reports or Look
Looks vs Dashboards
Login Looker FAQ
Looker Glossary
SEGMENT EVENT TRACKING
What are event tracking
Adding Tracking
What is the Tracking Plan?
The Chord Tracking Plan
The Shopify Tracking Plan
Event Tracking FAQ
EVENT UPDATES PAGE
Email Subscription Payment Event Update
Product Feed Setup
Getting Segment to Production
Consent Management
Installing in Next.js
Installing in Gatsby
Integrations
👩‍💻Developer Tools
Using Chord with Shopify
Docs powered by
Archbee
Developer Tools
...
Authentication
Stytch

Stytch Account Setup

14min

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.

2. SDK Configuration

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.

  • Next.js ↔️ Stytch Migration Guide
  • Gatsby ↔️ Stytch Migration Guide



Updated 03 Mar 2023
Did this page help you?
PREVIOUS
Stytch
NEXT
Stytch Migration Guides
Docs powered by
Archbee
TABLE OF CONTENTS
Step 1: Create Your Account
Step 2: Configure The Stytch Project
1. Add Redirect URLs
2. SDK Configuration
3. Configure Session Length
4. (Optional) Configure OAuth
Step 3: Configure Chord OMS To Use Stytch
Step 4: Integrate Stytch Into Your Chord Storefront
Docs powered by
Archbee