Add login or signup - Stytch Docs

Quickstart

Select a framework to start:

Example app

Next.js code example

Web demo

Try out the login flow

SDK reference

Next.js SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s domain to your project’s Authorized Domains.

Install the Next.js SDK and configure your API key

In your Next.js app, run the command to install the SDK:

npm

npm install @stytch/nextjs --save

Then add your Stytch public_token to your project’s .env file:

.env

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN

Set up a Stytch context provider

Create a custom Stytch wrapper component that initializes the Stytch client.

components/stytch-provider.jsx

'use client';

import { ReactNode } from 'react';
import { createStytchClient, StytchProvider } from '@stytch/nextjs';

const stytchClient = createStytchClient(
  process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN
);

export default function Stytch({ children }: { children: ReactNode }) {
  return <StytchProvider stytch={stytchClient}>{children}</StytchProvider>;
}

Wrap your application with <Stytch> to provide context to all child components:

app/layout.jsx

import Stytch from './components/stytch-provider';

export default function RootLayout({
  children,
}: {
  children: ReactNode
}) {
  return (
    <html>
      <body>
        <Stytch>{children}</Stytch>
      </body>
    </html>
  );
}

Add <StytchLogin> UI component

Create a <StytchLogin> component.
Set authentication methods and relevant options in the config object.

components/LoginOrSignupForm.jsx

import { Products, StytchLogin } from '@stytch/nextjs';

const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const LoginOrSignupForm = () => {
  return <StytchLogin config={config} />;
};

Add <LoginOrSignupForm> to your login page(s)

Add <LoginOrSignupForm> to your /login page.

app/login/page.jsx

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useStytchSession } from '@stytch/nextjs';
import { LoginOrSignupForm } from "src/components/LoginOrSignupForm";

export default function Login() {
  const { session, isInitialized } = useStytchSession();
  const router = useRouter();

  useEffect(() => {
    if (session && isInitialized) {
      router.replace("/home");
    }
  }, [session, isInitialized, router]);

  if (!isInitialized || session) {
    return <p>Loading...</p>;
  }

  return <LoginOrSignupForm/>;
}

If you’re using separate routes, add <LoginOrSignupForm> to your /authenticate redirect route as well, e.g. app/authenticate/page.jsx or pages/authenticate.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

Example app

Next.js code example

Web demo

Try out the login flow

SDK reference

Next.js SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s domain to your project’s Authorized Domains.

Install the Next.js SDK and configure your API key

In your Next.js app, run the command to install the SDK:

npm

npm install @stytch/nextjs --save

Then add your Stytch public_token to your project’s .env file:

.env

NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN=$PUBLIC_TOKEN

Wrap your application in <StytchProvider>

Initialize the Stytch client through createStytchClient().
Pass the Stytch UI client to the <StytchProvider> component at the root of your application, making it accessible to all child components.

pages/_app.jsx

// For Page Router setups
import { createStytchClient, StytchProvider } from '@stytch/nextjs';

const stytch = createStytchClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN!);

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <StytchProvider stytch={stytch}>
      <Component {...pageProps} />
    </StytchProvider>
  );
}

Add <StytchLogin> UI component

Create a <StytchLogin> component.
Set authentication methods and relevant options in the config object.

components/LoginOrSignupForm.jsx

import { Products, StytchLogin } from '@stytch/nextjs';
const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

export const LoginOrSignupForm = () => {
  return <StytchLogin config={config} />;
};

Add <LoginOrSignupForm> to your login page(s)

Add <LoginOrSignupForm> to your /login page.

app/login/page.jsx

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useStytchSession } from '@stytch/nextjs';
import { LoginOrSignupForm } from "src/components/LoginOrSignupForm";

export default function Login() {
  const { session, isInitialized } = useStytchSession();
  const router = useRouter();

  useEffect(() => {
    if (session && isInitialized) {
      router.replace("/home");
    }
  }, [session, isInitialized, router]);

  if (!isInitialized || session) {
    return <p>Loading...</p>;
  }

  return <LoginOrSignupForm/>;
}

If you’re using separate routes, add <LoginOrSignupForm> to your /authenticate redirect route as well, e.g. app/authenticate/page.jsx or pages/authenticate.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

Example app

React code example

Web demo

Try out the login flow

SDK reference

React SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s domain to your project’s Authorized Domains.

Install the React SDK and configure your API key

In your React app, run the command to install the SDK:

npm

npm install @stytch/react --save

Wrap your application in <StytchProvider>

Initialize the Stytch UI client through createStytchClient().
Pass the Stytch UI client to the <StytchProvider> component at the root of your application, making it accessible to all child components.

import { createStytchClient, StytchProvider } from '@stytch/react';

const stytch = createStytchClient($YOUR_PUBLIC_KEY);

// Add the component at the root of your application
export function App() {
  return (
    <StytchProvider stytch={stytch}>
      {/* Your app code */}
    </StytchProvider>
  );
}

Add <StytchLogin> UI component

Create a <StytchLogin> component.
Set authentication methods and relevant options in the config object.

import { Products, StytchLogin } from '@stytch/react';

const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [{ type: 'google' }],
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

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

Add <LoginOrSignup> to your login page(s)

Add <LoginOrSignup> to your /login page:

import { useStytchSession } from "@stytch/react";
import { Navigate } from "react-router";
import { LoginOrSignup } from "./LoginOrSignup";

export const Login = () => {
  const { session } = useStytchSession();

  if (session) {
    return <Navigate to="/home" />;
  }

  return <LoginOrSignup />;
};

If you’re using separate routes, add <LoginOrSignup> to your /authenticate redirect route as well, e.g. Authenticate.jsx.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

Example app

Vanilla JS code example

Web demo

Try out the login flow

SDK reference

Vanilla JS SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s domain to your project’s Authorized Domains.

Install the JS SDK and configure your API key

In your project, run the command to install the SDK:

npm

npm install @stytch/vanilla-js --save

Initialize the Stytch client for your app

Initialize the Stytch UI client through createStytchClient().
Export the initialized client as stytch so it can be used across your app.

js/stytch-client.js

import { createStytchClient } from "@stytch/vanilla-js";
export const stytch = createStytchClient($YOUR_PUBLIC_KEY);

Create a login.js file to register and initialize the custom element.
Set authentication methods and relevant options in the config object.

js/login.js

import { Products, StytchUI } from '@stytch/vanilla-js';
import { stytch } from "./stytch-client.js";

// Register the custom element
customElements.define('stytch-ui', StytchUI);

// Pass in the StytchClient and config
const login = document.getElementById('stytch-ui');
login.render({
  client: stytch,
  config: {
    products: [Products.emailMagicLinks, Products.oauth],
    oauthOptions: {
      providers: [{ type: 'google' }],
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  },
});

Add Stytch UI on your login page(s)

Add <stytch-ui> on your /login page:

<!DOCTYPE html>
<html lang="en">
  <head>...</head>
  <body>
    <stytch-ui id="stytch-ui" />
    <script type="module" src="js/login.js"></script>
  </body>
</html>

If you’re using separate routes, add <stytch-ui> on your /authenticate redirect route as well, e.g. authenticate.html.

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you retrieve the current session and can be used to determine if a user is already logged in.

Example app

Android code example

SDK reference

Android SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s application ID to your project’s Authorized bundle & application IDs.
The Stytch Android SDK automatically handles deeplinks in the pre-built UI flow (used below). You must add the following URLs to your project’s Redirect URLs in the Dashboard:
- [YOUR_PUBLIC_TOKEN]://b2c-ui
- [YOUR_PUBLIC_TOKEN]://oauth

Install the Android SDK and configure your API key

The Stytch Android SDK is published on Maven Central at com.stytch.sdk:sdk
The latest version can be found here

Make sure mavenCentral() is added to the repository configuration in your settings.gradle.kts file:

settings.gradle.kts

dependencyResolutionManagement {
  repositories {
    mavenCentral()
  }
}

Add the Stytch Android SDK to your application’s build.gradle.kts dependencies block:

app/build.gradle.kts

dependencies {
  implementation("com.stytch.sdk:sdk:$STYTCH_SDK_VERSION")
}

Add your public_token as a string resource. This will enable the SDK to automatically configure itself, including any necessary deeplinks.

You can either add this as an XML string resource or in code. An XML resource is the easiest, but if you wish to keep your token out of version control, and pass it as an environment variable instead, use the code approach:

As XML

app/src/main/res/values/strings.xml

<resources>
  <string name="STYTCH_PUBLIC_TOKEN">public-token-test-...</string>
</resources>

As code

app/build.gradle.kts

android {
  defaultConfig {
      resValue("string", "STYTCH_PUBLIC_TOKEN", "\"${System.getenv("STYTCH_PUBLIC_TOKEN")}\"")
  }
}

Initialize the Stytch client for your app

Initialize and configure the Stytch client using the StytchClient.configure() method.Note: Be sure to pass an application context to this method to prevent potential memory leaks. The below examples show how to do this from either an Application or Activity class. You will only choose one approach that is appropriate for your situation.

From an application class (preferred)

app/src/main/kotlin/com/example/exampleapp/MainApplication.kt

class MainApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    StytchClient.configure(this)
  }
}

From an activity class (alternate)

app/src/main/kotlin/com/example/exampleapp/MainActivity.kt

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      StytchClient.configure(applicationContext)
  }
}

Create the StytchUI client

Create a StytchUI instance using the familiar Builder pattern, configured to your needs. Below, we will be enabling Email magic links and Google OAuth:

app/src/main/kotlin/com/example/exampleapp/MainActivity.kt

val stytchUIClient = StytchUI.Builder().apply {
  activity(this@MainActivity)
  productConfig(
    StytchProductConfig(
      products = listOf(StytchProduct.EMAIL_MAGIC_LINKS, StytchProduct.OAUTH),
      oauthOptions = OAuthOptions(
        providers = listOf(OAuthProviderConfig(OAuthProvider.GOOGLE))
      )
    ),
  )
  onAuthenticated(::onAuthenticated)
}.build()

We’ll also define a method that responds to authentication events:

app/src/main/kotlin/com/example/exampleapp/MainActivity.kt

private fun onAuthenticated(result: StytchResult<*>) {
  when (result) {
    is StytchResult.Success -> println("User successfully authenticated")
    is StytchResult.Error -> println(result.error)
  }
}

Launch the authentication flow

Call the authenticate() method from your UI. Below, we are launching the authentication flow from a button press in a compose application:

app/src/main/kotlin/com/example/exampleapp/MyComposeApp.kt

Button(onClick = stytchUIClient::authenticate) {
  Text("Log in")
}

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK.We recommend listening to session/user changes from the appropriate flows in your view model:

app/src/main/kotlin/com/example/exampleapp/MainViewModel.kt

class MainViewModel : ViewModel() {
  val uiState =
    combine(
      StytchClient.isInitialized,
      StytchClient.user.onChange,
      StytchClient.sessions.onChange,
    ) { isInitialized, userData, sessionData ->
      val userIsAvailable = userData is StytchObjectInfo.Available
      val sessionIsAvailable = sessionData is StytchObjectInfo.Available
      when {
        !isInitialized -> AppUIState.Loading
        isInitialized && userIsAvailable && sessionIsAvailable -> AppUIState.LoggedIn(
          userData = userData.value,
          sessionData = sessionData.value,
        )
        else -> AppUIState.LoggedOut
      }
    }
    .stateIn(
      viewModelScope,
      SharingStarted.WhileSubscribed(5000),
      AppUIState.Loading,
    )
}

Example app

iOS code example

Headless SDK

iOS Headless SDK reference

UI SDK

iOS UI SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s Bundle ID to your project’s Authorized bundle & application IDs.
You must add the following URL to your project’s Redirect URLs in the Dashboard:
- stytchui-[YOUR_PUBLIC_TOKEN]://deeplink

Install the iOS SDK and configure your API key

The Stytch iOS SDK is available using Swift Package Manager

Add a new package package dependency pointing at our GitHub repository
In your project Build Settings, under Other Linker Flags, add -ObjC

Configure your application to handle Stytch UI deeplinks

Make sure to add the Stytch-specific deeplink URL scheme as an accepted URL type in your Info.plist

Info.plist

<dict>
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>stytchui-YOUR_PUBLIC_TOKEN</string>
      </array>
    </dict>
  </array>
</dict>

Configure StytchUIClient

Configure the StytchUIClient with your desired options. We recommend doing so in your viewmodel.Below, we will be enabling Email magic links and Google OAuth:

ContentViewModel.swift

class ContentViewModel: ObservableObject {
  @Published var stytchUIConfiguration: StytchUIClient.Configuration = .init(
    stytchClientConfiguration: StytchClientConfiguration(publicToken: [YOUR_PUBLIC_TOKEN], defaultSessionDuration: 5),
    products: [.emailMagicLinks, .oauth],
    oauthProviders: [.thirdParty(.google)],
  )

  init() {
    ...
    StytchUIClient.configure(configuration: stytchUIConfiguration)
    ...
  }
}

Launch the authentication flow

Add the following published properties to your viewmodel:

ContentViewModel.swift

class ContentViewModel: ObservableObject {
  @Published var isAuthenticated: Bool = false
  @Published var isAuthenticationPresented: Bool = false
}

Define a deeplink helper method (also in the viewmodel):

ContentViewModel.swift

func handleOpenURL(_ url: URL) {
  isAuthenticationPresented = true
  let didHandle = StytchUIClient.handle(url: url)
  print("StytchUIClient didHandle: \(didHandle) - url: \(url)")
}

Pass the new isAuthenticationPresented property to the authenticationSheet() method in your UI, and intercept links:

ContentView.swift

var body: some View {
  VStack {
    if viewModel.isAuthenticated {
      // Your Authenticated UI
    } else {
      // Your Unauthenticated UI
      // toggle $viewModel.isAuthenticationPresented to toggle the authentication flow
    }
  }
  .authenticationSheet(configuration: viewModel.stytchUIConfiguration, isPresented: $viewModel.isAuthenticationPresented)
  .onOpenURL { url in
    viewModel.handleOpenURL(url)
  }
}

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK.We recommend listening to session/user changes from the appropriate observables in your view model:

ContentViewModel.swift

class ContentViewModel: ObservableObject {
  private var cancellables = Set<AnyCancellable>()

  init() {
    ...
    startObservables()
    ...
  }

  func startObservables() {
    StytchUIClient.dismissUI
      .receive(on: DispatchQueue.main)
      .sink { [weak self] in
        self?.isAuthenticationPresented = false
      }
      .store(in: &cancellables)

    StytchUIClient.errorPublisher
      .receive(on: DispatchQueue.main)
      .sink { error in
        print("Error from StytchUIClient:")
        print(error.errorInfo)
      }
      .store(in: &cancellables)

    StytchUIClient.isInitialized
      .receive(on: DispatchQueue.main)
      .sink { isInitialized in
        print("isInitialized: \(isInitialized)")
      }
      .store(in: &cancellables)

    StytchUIClient.sessions.onSessionChange
      .receive(on: DispatchQueue.main)
      .sink { [weak self] sessionInfo in
        switch sessionInfo {
        case let .available(session, lastValidatedAtDate):
          print("Session Available: \(sessionInfo.expiresAt) - lastValidatedAtDate: \(lastValidatedAtDate)\n")
          print("User: \(String(describing: StytchClient.user.getSync()))")
          self?.isAuthenticated = true
        case .unavailable:
          print("Session Unavailable\n")
          self?.isAuthenticated = false
        }
      }
      .store(in: &cancellables)

Example app

React Native code example

SDK reference

React Native SDK reference

Before you start

Have a public_token from your Stytch project & environment.
Enable and configure Frontend SDKs in your Dashboard.
Add your application’s Bundle ID (iOS) and Application ID (Android) to your project’s Authorized bundle & application IDs.
You must add the following URL to your project’s Redirect URLs in the Dashboard:
- stytch-ui-[YOUR_PUBLIC_TOKEN]://deeplink

Install the React Native SDK

The Stytch React Native SDK is available on npm as @stytch/react-native.

npm

npm install @stytch/react-native @stytch/react-native-inappbrowser-reborn --save

Configure your application to handle Stytch UI deeplinks

You need to configure your app to listen for a deeplink with the scheme: stytch-ui-[YOUR_PUBLIC_TOKEN]. How you do that will depend on your supported platforms and whether you are using bare React Native or Expo.NOTE: If you are using Expo Router, which is the default for new apps created with create-expo-app, you must add a +native-intent.tsx, file which ignores routing for the incoming Stytch UI deep links. An example of this can be found here.

Configure the StytchClient

Configure the StytchClient with your public_token, and wrap your app in the StytchProvider component:

App.tsx

const publicToken = process.env.EXPO_PUBLIC_STYTCH_PUBLIC_TOKEN ?? '';
const stytch = new StytchClient(publicToken);

export default function RootLayout() {
  return (
    <StytchProvider stytch={stytch}>
      <YourApp>
    </StytchProvider>
  );
}

Authenticate a user

Define your desired configuration for the authentication flow. Below, we will be enabling Email magic links and Google OAuth:

App.tsx

const config: StytchUIConfig = {
  productConfig: {
    products: [Products.emailMagicLinks, Products.oauth],
    oauthOptions: { providers: [OAuthProviders.Google] },
  },
};

Display the authentication flow, and listen to the callbacks to determine when a user is fully authenticated:

App.tsx

export default function LoginScreen() {
    const stytch = useStytch();
    const { user } = useStytchUser();
    useEffect(() => {
        if (user) {
            navigation.navigate('Profile');
        }
    }, [user, navigation]);
    return <StytchUI client={stytch} config={config}></StytchUI>;
}

Handle session and user data

At this point, you can retrieve Session data and User data via the SDK. For example, useStytchSession() lets you easily check for an active session.

Next steps

Authentication methods
Session management

​Quickstart

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

Example app

Web demo

SDK reference

Example app

SDK reference

Example app

Headless SDK

UI SDK

Example app

SDK reference

​Next steps

Quickstart

Next steps