Skip to main content

Libraries

While the SDKs include Stytch UI components, you can use the frontend SDKs headlessly to build your own custom auth flow and UI.

Example code

See the headless example apps for more complete codes examples, including examples for other frameworks.

Starting the authentication flow

// Start the authentication flow
import { useStytchB2BClient, useStytchMember, useStytchMemberSession } from '@stytch/nextjs/b2b';

const Login = (organization) => {
  const stytchB2BClient = useStytchB2BClient();

  const sendEmailMagicLink = async () => {
    await stytchB2BClient.magicLinks.email.loginOrSignup({
      email_address: 'sandbox@stytch.com',
      organization_id: organization.organization_id
    });
  };

  return <button onClick={sendEmailMagicLink}>Login</button>;
//...

Completing the authentication flow

// Complete the authentication flow
const Authenticate = () => {
  const stytchB2BClient = useStytchB2BClient();
  const router = useRouter();

  useEffect(() => {
    const token = router?.query?.token?.toString();
    stytchB2BClient.magicLinks.authenticate({
      magic_links_token: token,
      session_duration_minutes: 60,
    });
  }, [router, stytchB2BClient]);
//...