Skip to main content
This guide walks through adding Magic Links to Stytch’s pre-built UI components. The pre-built UI automatically handles both and Organization-specific authentication flows.

​
Prerequisites

If you haven’t done so already:
  1. Enable the Frontend SDKs in your Stytch Dashboard
  2. Enable Create Organizations under “Enabled Methods.”
To surface email magic links as an authentication option in your login UI, simply add it to the UI config products array. 
import { AuthFlowType, B2BProducts, StytchB2B } from '@stytch/react/b2b';

const config = {
  authFlowType: AuthFlowType.Discovery,
  products: [B2BProducts.emailMagicLinks],
  emailMagicLinksOptions: {
    discoveryRedirectURL: 'https://localhost:3000/authenticate',
  },
  sessionOptions: { sessionDurationMinutes: 60 },
};

const LoginOrSignup = () => {
  return <StytchB2B config={config} />;
};

​
Render the UI component

Render the Stytch UI component on the Redirect URL(s) that you specified in the Stytch Dashboard during the configuration steps. When rendered, the UI component will automatically:
  • Send an email to the user containing a magic link
  • On click, handle calling Stytch’s servers to authenticate the token
  • For Discovery flows, prompt the user with their discovered organizations and handle their selection
  • For Organization-specific flows, log the user in directly

​
Test your integration

Start your application and test the magic link flow:
  1. Navigate to your login page
  2. Input your email and click Continue
  3. Click on the login link sent to your email
  4. Verify that you’re redirected back to your application and authenticated

​
Next steps

Customize the UI

Learn how to customize the appearance and behavior of the pre-built UI

Session management

Learn how to add server-side session authentication and authorization with Stytch sessions