Stytch - Auth platform for developers

IdentityProvider

The IdentityProvider function renders UI to enable the logged-in user to perform an OAuth Authorization flow with a pre-registered Connected App. The UI component will automatically parse out OAuth related fields from the query params, such as client_id, redirect_uri, scope, and state.

The user must be logged in before this component is rendered.

For an overview of when consent is required, see our Consent Management guide.

If your project has Custom Scopes configured, the Consent UI can be customized via the getIDPConsentManifest prop. Supply a custom manifest for fine-grained control over the wording used and grouping of the permissions being requested. If no getIDPConsentManifest function is defined, the description field for each scope will be used instead.

IdentityProvider must be wrapped inside a StytchProvider. Take a look at our installation guide for more information on how to configure the StytchProvider for your framework.

Fields

styles object

callbacks object

getIDPConsentManifest function

import React from 'react';
import { IdentityProvider } from '@stytch/react';

const styles = { fontFamily: 'Arial' };

const isProfileScope = (scope) => scope === 'openid' || scope === 'email' || scope === 'profile';
const isDataScope = (scope) => !isProfileScope(scope);

const getScopeDescription = (scope) => {
  switch (scope) {
    case 'openid':
      return 'Your account ID';
    case 'email':
      return 'Your email address';
    case 'profile':
      return 'Your name and profile';
    case 'read:data':
      return 'Read access to your data';
    case 'write:data':
      return 'Write access to your data';
    default:
      return `The ${scope} permission`;
  }
};

const getManifest = ({ scopes, clientName }) => [
  {
    header: `${clientName} wants to view your Profile`,
    items: [
      {
        text: 'View information stored in your Profile about your account and your user.',
        details: scopes.filter(isProfileScope).map(getScopeDescription),
      },
    ],
  },
  {
    header: `${clientName} wants to access your Data`,
    items: scopes.filter(isDataScope).map(getScopeDescription),
  },
];

const MyComponent = () => {
  return <IdentityProvider styles={styles} getIDPConsentManifest={getManifest} />;
};

export default MyComponent;