OAuth is a popular authentication framework that delegates authentication to an external identity provider (often shortened to IdP) like Google, Facebook, Apple, and Microsoft. A user relies on their membership from that provider to sign in instead of creating another password, and developers can enrich their users' experiences with the information shared by the providers.
The JavaScript SDK provides a pre-built UI for OAuth flows, as well as methods to start and authenticateOAuth flows that you can connect to your own UI. Use either of these approaches to quickly get up and running with OAuth.
Methods
The SDK provides methods that can be used to get the URL to start an OAuth flow and authenticate tokens in the links later.
To call these methods, OAuth must be enabled in the SDK Configuration page of the Stytch dashboard.
Start
The oauth.$provider.start() methods start OAuth flows by redirecting the browser to one of Stytch's oauth start endpoints. The method will also generate a PKCE code_verifier and store it in local storage on the device (See the PKCE OAuth guide for details). If your application is configured to use a custom subdomain with Stytch, it will be used automatically.
The authenticate method wraps the authenticate OAuth API endpoint which validates the OAuth token passed in.
If this method succeeds, the user will be logged in, granted an active session, and the session cookies will be minted and stored in the browser.
You can listen for successful login events anywhere in the codebase with the stytch.session.onChange() method or useStytchSession hook if you are using React.
Our Javascript SDK wraps our start OAuth endpoint which kicks off the OAuth flow for your users. You'll want to set up each OAuth provider in your Dashboard before using it in the SDK. The SDK supports Google, Google One Tap, Amazon, Apple, Bitbucket, Coinbase, Discord, GitHub, GitLab, Facebook, LinkedIn, Microsoft, Salesforce, Slack, Twitch, and Yahoo OAuth.
To add OAuth to the login UI, add SDKProductTypes.oauth to the products array in the configuration and the appropriate oauthOptions.
To see all authentication and customization options, see the UI config section.