> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Adding magic links to Stytch Login
> Integrate magic links with Stytch's pre-built UI components.
export const organization = "Represents an instance or tenant in your application, typically mapping to each of your top-level customers.";
export const discovery = "Centralized login flow that allows users to view all Organizations they have access to, including pending invites and Organizations they are allowed to automatically join based on their verified email domain.";
export const ist = "A session token designed to preserve state when the user has completed an initial authentication step, but has not fully authenticated into an Organization.";
This guide walks through adding Magic Links to Stytch's pre-built UI components. The pre-built UI automatically handles both Discovery and Organization-specific authentication flows.
## Prerequisites
If you haven't done so already:
1. Enable the Frontend SDKs in [your Stytch Dashboard](https://stytch.com/dashboard/sdk-configuration)
2. Enable Create Organizations under "Enabled Methods."
## Add magic links to your UI config
To surface email magic links as an authentication option in your login UI, simply add it to the UI config products array.
```jsx React icon=react theme={null}
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 ;
};
```
```jsx Next.js icon=triangle theme={null}
import { AuthFlowType, B2BProducts, StytchB2B } from '@stytch/nextjs/b2b';
const config = {
authFlowType: AuthFlowType.Discovery,
products: [B2BProducts.emailMagicLinks],
emailMagicLinksOptions: {
discoveryRedirectURL: 'https://localhost:3000/authenticate',
},
sessionOptions: {
sessionDurationMinutes: 60,
},
};
export const LoginOrSignupDiscoveryForm = () => {
return ;
};
```
```javascript Vanilla JS icon=square-js theme={null}
```
## Render the UI component
Render the Stytch UI component on the Redirect URL(s) that you specified in the [Stytch Dashboard](https://stytch.com/dashboard/redirect-urls) 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
Learn how to customize the appearance and behavior of the pre-built UI
Learn how to add server-side session authentication and authorization with Stytch sessions