Consumer Authentication

/

Frontend SDKs

/

Headless

/

One-Time Passcodes (OTP)

/

Authenticate

Authenticate

The Authenticate method wraps the authenticate one-time passcode API method which validates the code passed in.

If this method succeeds, the user will be logged in, granted an active session, and the session cookies will be minted and stored in the browser.

You can listen for successful login events anywhere in the codebase with the stytch.session.onChange() method or useStytchSession hook if you are using React.

Method parameters

method_id* string
code* string
Configuration* object

Additional configuration.

session_duration_minutes* int

Response fields

request_id string
status_code int
method_id string
user_id string
session_token string
session_jwt string
session object
import React, { useCallback, useState } from 'react';
import { useStytch } from '@stytch/react';

export const Authenticate = () => {
  const stytch = useStytch();
  const [code, setCode] = useState('');

  // returned from calling loginOrCreate for OTPs on SMS, WhatsApp or Email
  const methodId = 'phone-number-test-d5a3b680-e8a3-40c0-b815-ab79986666d0';

  const authenticate = useCallback(
    (e) => {
      e.preventDefault();
      stytch.otps.authenticate(code, methodId, {
        session_duration_minutes: 60,
      });
    },
    [stytch, code],
  );

  const handleChange = useCallback((e) => {
    setCode(e.target.value);
  }, []);

  return (
    <form>
      <label htmlFor="otp-input">Enter code</label>
      <input id="otp-input" autoComplete="one-time-code" inputMode="numeric" pattern="[0-9]*" onChange={handleChange} />
      <button onClick={authenticate} type="submit">
        Submit
      </button>
    </form>
  );
};

RESPONSE

200
{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
  "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
  "session_jwt": "eyJ...",
  "session": {...},
  "method_id": "phone-number-test-d5a3b680-e8a3-40c0-b815-ab79986666d0",
}