Build an authorization server using Stytch Connected Apps

​

Prerequisites

• A Stytch project. If you don’t have one already, or would like to create a new one, in the Dashboard, click on your existing project name in the top left corner of the Dashboard, click Create Project, and then select B2B Authentication or Consumer Authentication.
• A React or Next.js app authorized to use Stytch frontend SDKs.
• A Relying Party app (the Connected App) that wishes to receive user information from your application.

​

Integration steps

1

Implement the React component

To use the Stytch frontend SDK, we have created a component for use in your app:

• <IdentityProvider /> for Consumer applications
• <B2BIdentityProvider /> for B2B applications

When mounted on the page located at the Authorization URL, this component will catch the parameters passed in the URL and initiate the flow with Stytch. After the initial step succeeds, Stytch will respond with a redirect to send the user’s browser to the redirect_uri with a code for the Connected App to complete the flow on its backend.

B2B

Consumer

Report incorrect code

Copy

Ask AI

const { member } = useStytchMember();

if (!member) {
  const loginURL = `/login?returnTo=${window.location.toString()}`
  return <Redirect to={loginURL} />
}

return <B2BIdentityProvider />

For this flow to succeed, the user must already be logged in to your Stytch-powered app and have an active session, so you’ll want to check for a valid session prior to rendering the component and if the user is not logged in, redirect to the login page with a return_to parameter. Learn more about the Authorization Code Flow here.

2

Configure Stytch for the component

Enter the URL where the component is mounted into the Authorization URL field in the Connected Apps section of the Stytch Dashboard.

3

Create a new Connected App in the dashboard

After Stytch handles verification of the user and the application’s ability to access the user’s information, Stytch will issue a redirect. To set this up, each Connected App is also configured in the Connected Apps section of the Dashboard.

How does the redirect work

This redirect is intended to go to a callback URL which should be supplied by the Connected App. The redirect will pass an authorization code - a short-lived credential that the Connected App will use to complete the authorization flow.

Create a new Connected App and specify what type of user consent and OIDC flow the Connected App should expect. Stytch supports connecting a few types of client apps which vary based on how much user consent is appropriate and specifics of the OIDC flow.

4

Configure the Connected App

Continue to configure the Connected App. Make sure to take a note of the “Client ID” and the “Client secret” (for confidential apps); these will be needed by the Connecting App to complete the Authorization Code Flow.The Connected App will also supply a Redirect URL for receiving the login information from Stytch after the initial login is complete. This should be entered into the “Redirect URLs” field.At this point, off-the-shelf software should be prepared to authorize as a Connected App with Stytch. If implementing your own Connected App, see this guide to learn more.

​

What’s next

• Implementing your own Connected App
• Public Apps: Authorization Code Flow with PKCE
• Log users in with other commonly used IdPs such as Google and Microsoft ActiveDirectory with OAuth multi-tenant and consumer applications
• Learn more about Machine-to-Machine authentication with M2M for multi-tenant and consumer applications
• Add custom claims to your Connected Apps access tokens using a Custom Claim Template for multi-tenant and consumer applications