Getting Started with Stytch OAuth
Before integrating OAuth with Stytch into your application, there are a few basic configuration steps in the Stytch Dashboard:
Create an OAuth client
In the Stytch Dashboard, navigate to the OAuth section under the Configuration heading on the navigation bar. Select the OAuth identity provider of your choice and click Configure. Once in the provider configuration, we recommend clicking the Visit guide button to streamline the configuration of your OAuth client.
Be sure to add the Stytch redirect URI to your provider OAuth setup as an authorized redirect URI. The Stytch redirect URI is where end users are redirected after they have authenticated with the provider.
2Add or Update RedirectURLs in the Stytch Dashboard
By default, all new projects have redirect URLs set to http://localhost:3000/authenticate for the Test environment in the Dashboard.
If you want to use a different port, update the dashboard to specify new default Redirect URLs for:
- Sign-up and Login Redirect URL (for organization-specific login)
- Discovery Redirect URL (for discovery authentication)
3(Optional) Create an Organization
You can get started with the Discovery sign-up or login flow without this step, so feel free to skip to Step 4!
If you want to start with an example of logging into an existing Organization, you can do so by creating an
Organizationthrough the Stytch dashboard or CreateOrganization API.
If you are using Google or Microsoft as OAuth providers, and will be testing using a corporate email, you can allow Just In Time (JIT) Provisioning to the Organization via email domain by including your domain in the email_allowed_domains array and setting email_jit_provisioning to RESTRICTED.
{
"organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
"email_allowed_domains": [
"stytch.com"
],
"email_jit_provisioning": "RESTRICTED"
}
Just-in-Time (JIT) Provisioning by email domain is restricted for common, free email providers (e.g. gmail.com) so if you don’t have a corporate email, you can alternatively create a Member in your new Organization with the email you will use to log in.
You can create a Member in the dashboard by navigating to the Organization and clicking “Create new member” or by calling the CreateMember API.
If you are using Slack, HubSpot, or GitHub as OAuth providers, and you want to test JIT Provisioning by OAuth tenant ID, you can allow JIT Provisioning to the organization by tenant ID by setting oauth_tenant_jit_provisioning to RESTRICTED and including tenant IDs in the provider-keyed array in the allowed_oauth_tenants object:
{
"organization_id": "organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931",
"allowed_oauth_tenants": {
"hubspot": ["HUBSPOT-ABC", "HUBSPOT-DEF"],
"slack": ["SLACK-123", "SLACK-456"],
"github": [12345, 67890]
},
"oauth_tenant_jit_provisioning": "RESTRICTED"
}
Your Slack tenant ID (referred to as a Workspace ID by Slack) can be determined by following this guide.
Your HubSpot tenant ID (referred to as a Hub ID by HubSpot) can be determined by either:
- Logging into your HubSpot developer account and parsing it from your URL's path, it will have the form https://app.hubspot.com/developer/${TENANT_ID}.
- When logged into your HubSpot developer account, clicking on the dropdown menu under your account name in the upper right. It will be the sequence of numbers under your account name.
For GitHub, tenant IDs are taken from the internal ID of a GitHub organization. There are a number of ways to retrieve this value, depending on your permissions in relation to the GitHub organization and the organization's privacy settings:
- You can query GitHub's organization endpoint. The tenant ID will be the "id" value in the JSON response.
- If you are a member of the GitHub org in question, it may be easier to use the GitHub CLI to request a list of the organizations you are a member of with the "list authenticated orgs for user endpoint.".
See our guide on understanding step-up flows for Slack/HubSpot/GitHub OAuth to learn about OAuth Discovery for Slack and HubSpot.
4Start integrating
Follow one of the below guides to get an end-to-end OAuth flow up and running.
If you’re not sure what integration approach you want to take long-term, that’s fine!
If you want to get up and running with as little code as possible, check out the pre-built UI integration guide. If you want to get a sense for how much fine-grained control you can have with Stytch, choose between the backend and headless frontend integration guides depending on where in the stack you feel most comfortable.