Add sign-in

Start with one working sign-in method. Email and password is the default for an email-based deployment. Your deployment's public sign-in configuration reports which other methods are enabled; a button in the app cannot enable one by itself.

Choose a starting point

Method	What someone does	Setup to check
Email and password	Enters their email and password.	The deployment permits password sign-in and the account is ready.
Google	Leaves your app to sign in with Google, then returns.	Google is enabled; the app origin and exact return URL are allowed.
Magic link or passkey	Follows an emailed link or uses a registered passkey.	The relevant passwordless capability is enabled and configured.
Phone	Uses the phone sign-in method configured for the deployment.	A ready phone pool and the required SMS setup; phone sign-in also has feature limits.

You don't have to offer all of them. Phone and email sign-in choices affect the underlying pools, so use the deployment's advertised capabilities instead of assuming every method is interchangeable.

React example

Preview: the SDK packages below are not published to npm. The intended install command is shown for reference; it will only work once the packages are released. The code below previews the intended public SDK integration. Use the discovery and CLI guides while the public packages are unavailable.

npm install @saaslayer/react @saaslayer/js

This example is for an app using Users and Permissions. Replace both example API addresses with the endpoints from your deployment. A Users-only integration can use the framework-independent JavaScript session client instead; the React provider currently also expects a Permissions API address in its configuration.

import { fetchDiscoveryConfig } from '@saaslayer/js'
import { SaaSLayerProvider, SignIn } from '@saaslayer/react'
 
const userServiceApiBase = 'https://users.example.com'
const discovery = await fetchDiscoveryConfig(userServiceApiBase)
 
if (!discovery.region || !discovery.userPoolId || !discovery.clientId) {
  throw new Error('The deployment did not return its sign-in settings')
}
 
const config = {
  region: discovery.region,
  userPoolId: discovery.userPoolId,
  clientId: discovery.clientId,
  userServiceApiBase,
  permissionsApiBase: 'https://permissions.example.com',
}
 
export function LoginPage() {
  return (
    <SaaSLayerProvider config={config} discovery={discovery}>
      <SignIn onSignedIn={() => location.assign('/app')} />
    </SaaSLayerProvider>
  )
}

Run the discovery fetch during your app's client startup before rendering this page. The component handles the sign-in UI and challenges such as MFA. The /app route belongs to your application; create it or change the destination.

For Google sign-in, configure socialRedirectUri when the callback should go to a different route. Its exact URL must be in AllowedCallbackUrls.

The session identifies the person using your app. Your backend must verify the token from the expected deployment, including its issuer, audience and expiry, before trusting that identity. Users service API calls use the session's ID token; don't substitute a Cognito access token for it.

Authentication alone doesn't grant access to every account or record in your app. Enforce the relevant access rules on the server, optionally using Permissions.

Common things to check

Browser calls fail, but curl works: check AllowedAppOrigins, including the local port.
Google returns to the wrong page: check the configured callback URL and socialRedirectUri.
A sign-in option is missing: check the deployment descriptor. The method may be disabled or not ready.
A person can sign in but an admin command is denied: use an account with the required administrative permissions. Signing in and being an administrator are separate.

Continue with Manage users.

Add sign-in

Choose a starting point

React example

What happens after sign-in?

Common things to check