Stytch Vanilla JS SDK

https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/
Admin
The Stytch Vanilla JS SDK provides tools for integrating Stytch's user infrastructure and...
Tokens:136,881
Snippets:583
Trust Score:10
Update:8 months ago
Show doc for...
Tokens:
Raw
### Initialize Stytch Vanilla JS Client

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/installation

Initializes the Stytch client for Vanilla JS applications. This requires your Stytch Project's public token, which can be found in the Stytch Dashboard. The example shows initialization using Vite's `import.meta.env` and also mentions `process.env` for non-Vite projects.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient(
  import.meta.env.STYTCH_PUBLIC_TOKEN, // or process.env.STYTCH_PUBLIC_TOKEN for non-Vite based projects
);
```

--------------------------------

### Install Stytch Vanilla JS SDK using npm

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/installation

Installs the `@stytch/vanilla-js` package, which is the core library for integrating Stytch authentication into your Vanilla JavaScript application. This command is typically run in your project's terminal.

```bash
npm install @stytch/vanilla-js
```

--------------------------------

### Get User Information with Stytch Vanilla JS SDK

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/users/get-user

Demonstrates how to initialize the Stytch client and retrieve user data using the `stytch.user.get()` method. This function requires a public token for initialization and returns user details, which are then logged to the console. Ensure the `@stytch/vanilla-js` package is installed.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

const getUser = async () => {
  const user = await stytch.user.get();
  console.log('User:', user);
};
```

--------------------------------

### OAuth Start Flow

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/oauth/start

Initiates an OAuth authentication flow for a specified provider. This method redirects the user to the provider's authorization page and handles PKCE code generation and storage.

```APIDOC
## POST /oauth/{provider}/start

### Description
Starts an OAuth authentication flow for a given provider. This method redirects the user to the OAuth provider's authorization page and automatically generates and stores a PKCE `code_verifier` in local storage.

### Method
POST

### Endpoint
`/oauth/{provider}/start`

### Parameters
#### Query Parameters
- **configuration** (object) - Optional - Additional configuration options for the OAuth flow.
  - **login_redirect_url** (string) - Optional - The URL Stytch redirects to after a successful OAuth flow for an existing user. Must be configured as a Login URL in the Stytch dashboard.
  - **signup_redirect_url** (string) - Optional - The URL Stytch redirects to after a successful OAuth flow for a new user. Must be configured as a Signup URL in the Stytch dashboard.
  - **custom_scopes** (string) - Optional - A space-separated list of custom scopes to include in the OAuth request. This list must be URL-encoded.
  - **provider_params** (object) - Optional - An object containing parameters to pass directly to the OAuth provider (e.g., `login_hint`). Consult the provider's documentation for supported parameters.
  - **oauth_attach_token** (string) - Optional - A single-use token for connecting an OAuth Attach request to an OAuth Start request.

### Request Example
```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('YOUR_PUBLIC_TOKEN');

stytch.oauth.google.start({
  login_redirect_url: 'https://your-app.com/authenticate',
  signup_redirect_url: 'https://your-app.com/authenticate',
  custom_scopes: [
    'https://www.googleapis.com/auth/documents.readonly',
    'https://www.googleapis.com/auth/drive.readonly',
  ],
  provider_params: {
    login_hint: 'example_hint@stytch.com',
  },
});
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the OAuth flow was started successfully.

#### Error Response
- **success** (boolean) - Indicates if the OAuth flow was started successfully (will be false).
- **error** (object) - The error object if the OAuth flow failed.
- **reason** (string) - If an error occurred, this provides the reason (e.g., `User Canceled`, `Authentication Failed`, `Invalid Platform`).
```

--------------------------------

### Stytch API Response Examples (JSON)

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/sessions/exchange-access-token

These examples showcase the JSON structure of responses from the Stytch API for the `exchangeAccessToken` operation, covering successful authentication (200) and various error scenarios (400, 404, 429, 500). Each example includes the status code, request ID, and relevant error details or success information.

```json
{
    "status_code": 200,
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6"
    "session_jwt": "eyJ...",
    "session_token": "mZAYn5aLEqKUlZ_Ad9U_fWr38GaAQ1oFAhT8ds245v7Q",
    "user": {...},
    "session": {...},
}
```

```json
{
  "status_code": 400,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "invalid_trusted_auth_token",
  "error_message": "Provided trusted auth token is not valid.",
  "error_url": "https://stytch.com/docs/api/errors/400"
}
```

```json
{
  "status_code": 404,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "trusted_token_profile_not_found",
  "error_message": "The trusted token profile could not be found.",
  "error_url": "https://stytch.com/docs/api/errors/404"
}
```

```json
{
  "status_code": 429,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "too_many_requests",
  "error_message": "Too many requests have been made.",
  "error_url": "https://stytch.com/docs/api/errors/429"
}
```

```json
{
  "status_code": 500,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "internal_server_error",
  "error_message": "Oops, something seems to have gone wrong, please reach out to support@stytch.com to let us know what went wrong.",
  "error_url": "https://stytch.com/docs/api/errors/500"
}
```

--------------------------------

### WebAuthn Authentication

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/webauthn/authenticate

This section details how to authenticate a user using WebAuthn with the Stytch Vanilla JS SDK. It includes a code example for initiating the authentication and response examples for successful authentication and various error scenarios.

```APIDOC
## POST /webauthn/authenticate

### Description
Authenticates a user using WebAuthn credentials. This method is typically called after a user has initiated a WebAuthn registration or login flow.

### Method
POST

### Endpoint
/webauthn/authenticate

### Parameters
#### Request Body
- **session_duration_minutes** (number) - Required - The desired duration for the user's session in minutes.

### Request Example
```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const authenticate = () => {
  stytch.webauthn.authenticate({
    session_duration_minutes: 60,
  });
};
```

### Response
#### Success Response (200)
- **status_code** (number) - The HTTP status code of the response (200 for success).
- **request_id** (string) - A unique identifier for the request.
- **session** (object | null) - The user's session object, or null if no session was created.
- **session_jwt** (string) - The JWT for the user's session, or an empty string if no session was created.
- **session_token** (string) - The session token for the user's session, or an empty string if no session was created.
- **user** (object) - The user object.
- **user_id** (string) - The unique identifier for the user.
- **webauthn_registration_id** (string) - The ID of the WebAuthn registration used for authentication.

#### Error Responses
- **400 Bad Request**: Returned when the public key credential provided is invalid.
  - **status_code** (number) - 400
  - **request_id** (string) - A unique identifier for the request.
  - **error_type** (string) - `invalid_public_key_credential`
  - **error_message** (string) - "Invalid public key credential. Please confirm you're passing a correctly formatted public key credential."
  - **error_url** (string) - URL to the documentation for this error.
- **401 Unauthorized**: Returned when the WebAuthn registration cannot be authenticated.
  - **status_code** (number) - 401
  - **request_id** (string) - A unique identifier for the request.
  - **error_type** (string) - `unable_to_auth_webauthn_registration`
  - **error_message** (string) - "WebAuthn registration could not be authenticated."
  - **error_url** (string) - URL to the documentation for this error.
- **429 Too Many Requests**: Returned when the rate limit has been exceeded.
  - **status_code** (number) - 429
  - **request_id** (string) - A unique identifier for the request.
  - **error_type** (string) - `too_many_requests`
  - **error_message** (string) - "Too many requests have been made."
  - **error_url** (string) - URL to the documentation for this error.
- **500 Internal Server Error**: Returned when an unexpected server error occurs.
  - **status_code** (number) - 500
  - **request_id** (string) - A unique identifier for the request.
  - **error_type** (string) - `internal_server_error`
  - **error_message** (string) - "Oops, something seems to have gone wrong, please reach out to support@stytch.com to let us know what went wrong."
  - **error_url** (string) - URL to the documentation for this error.

### Response Example (Success)
```json
{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "session": null,
  "session_jwt": "",
  "session_token": "",
  "user": {},
  "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
  "webauthn_registration_id": "webauthn-registration-test-5c44cc6a-8af7-48d6-8da7-ea821342f5a6"
}
```

### Response Example (Error 400)
```json
{
  "status_code": 400,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "invalid_public_key_credential",
  "error_message": "Invalid public key credential. Please confirm you're passing a correctly formatted public key credential.",
  "error_url": "https://stytch.com/docs/api/errors/400"
}
```
```

--------------------------------

### Start Google OAuth Flow with Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/oauth/start

Initiates the OAuth 2.0 flow for Google authentication using the Stytch Vanilla JS SDK. This method redirects the user to Google's authorization server and handles PKCE code generation and storage. It accepts optional parameters for login and signup redirect URLs, custom scopes, and provider-specific parameters like `login_hint`.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const startOAuth = () =>
  stytch.oauth.google.start({
    login_redirect_url: '${exampleURL}/authenticate',
    signup_redirect_url: '${exampleURL}/authenticate',
    custom_scopes: [
      'https://www.googleapis.com/auth/documents.readonly',
      'https://www.googleapis.com/auth/drive.readonly',
    ],
    provider_params: {
      login_hint: 'example_hint@stytch.com',
    },
  });

```

--------------------------------

### Configure Stytch Client and UI Options in Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/login/configuration

Initializes the Stytch client with a public token and sets up configuration options for products, OAuth, email magic links, session management, theming, callbacks, and custom strings for the prebuilt UI.

```jsx
import {
  Products,
  createStytchClient,
  StytchLogin,
} from "@stytch/vanilla-js";

const stytch = createStytchClient('public-token-test-be835f9a-ac37-44cf-817d-f58ac2b3ae3d');

// Set the login configuration
const config = {
  products: [Products.emailMagicLinks, Products.oauth],
  oauthOptions: {
    providers: [
      { type: 'google', one_tap: true },
      { type: 'microsoft' }
    ],
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  emailMagicLinksOptions: {
    loginRedirectURL: 'https://example.com/authenticate',
    signupRedirectURL: 'https://example.com/authenticate',
  },
  sessionOptions: {
    sessionDurationMinutes: 60,
  },
};

// Set the styles for the prebuilt UI
const presentation = {
  theme: { 'font-family': 'Arial' },
};

// Set the callbacks to fire as a result of events from the prebuilt UI
const callbacks = {
  onEvent: ({ type, data }) => {
    console.log(type, data);
  },
  onError: (error) => {
    console.log(error);
  },
};

// Customize the text in the prebuilt UI
const strings = {
  'login.title': 'Log in or sign up',
};

```

--------------------------------

### Initialize and Render Stytch Identity Provider in Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/identity-provider/configuration

Demonstrates how to initialize the Stytch client and render the StytchIdentityProvider custom element with theme customization. This requires the '@stytch/vanilla-js' package and a public token.

```javascript
import { StytchClient, StytchIdentityProvider } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

customElements.define('stytch-identity-provider', StytchIdentityProvider);
// In HTML: <stytch-identity-provider id="stytch-identity-provider" />
document.getElementById('stytch-identity-provider').render({
  client: stytch,
  presentation: { theme: { 'font-family': 'Arial' } },
});
```

--------------------------------

### Customize Stytch UI Dark Theme

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/theming

This example demonstrates how to override properties of the default dark theme. You can extend 'defaultDarkTheme' and modify specific values like 'primary'.

```javascript
const presentation = {
  theme: {
    ...defaultDarkTheme,
    primary: '#ef223a',
  },
};
```

--------------------------------

### Replace Stytch Logo with Custom React Component

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/theming

Enables complete replacement of Stytch logos with custom React components. The component must accept a `size` prop and spread any additional props to the root element. This is demonstrated with an example for replacing the Outlook logo.

```jsx
const OutlookLogo = ({ size, ...props }) => (
  <svg width={size} height={size} {...props}>...</svg>
);

const presentation = {
  icons: {
    outlook: OutlookLogo,
  },
};
```

--------------------------------

### Initialize Stytch Client and Register for WebAuthn (Vanilla JS)

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/webauthn/register

This snippet demonstrates how to initialize the Stytch client with a public token and initiate the WebAuthn registration process. It requires the '@stytch/vanilla-js' package. The function `register` is exported for use in your application.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const register = () => {
  stytch.webauthn.register();
};
```

--------------------------------

### Initialize and Render Stytch UI Web Component

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/web-component

Demonstrates how to create a Stytch client, define the custom element, and render the Stytch UI component with provided client and configuration. It shows both HTML-first and JavaScript-first initialization methods.

```javascript
import { createStytchClient, StytchUI } from '@stytch/vanilla-js';

const stytch = createStytchClient("${publicToken}");

customElements.define('stytch-ui', StytchUI);

// If you have it in the HTML, you can query for it
// <stytch-ui id="stytch-ui"></stytch-ui>
const element = document.getElementById('stytch-ui');

// Or instead of writing <stytch-ui> in HTML, you can also initialize the elements in JS
// and insert it into the DOM manually
const element = new StytchUI();

document.body.appendChild(element);

// All options can be passed in all at once using the .render() function
element.render({
  client: stytch,
  config: { ... },
});

// Or set properties individually
element.presentation = {
  theme: { ... },
};
```

--------------------------------

### Start OAuth Authorization with Stytch Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/connected-apps/start-oauth-authorization

Initiates the OAuth authorization flow by calling the `stytch.idp.oauthAuthorizeStart` method. This function requires a public token, client ID, redirect URI, response type, and desired scopes. It handles potential errors during the process and logs the response or error to the console.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const startOAuthAuthorization = async () => {
  try {
    const response = await stytch.idp.oauthAuthorizeStart({
      client_id: '${exampleConnectedAppClientID}',
      redirect_uri: 'https://example.com/callback',
      response_type: 'code',
      scopes: ['openid', 'profile', 'email'],
      prompt: 'consent',
    });

    console.log('OAuth authorization started:', response);
    return response;
  } catch (error) {
    console.error('Error starting OAuth authorization:', error);
    throw error;
  }
};
```

--------------------------------

### Create Singleton Stytch Client

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/web-component

Shows how to create a singleton Stytch client instance, recommended to be defined in a separate file for efficient initialization. It uses environment variables for the public token.

```javascript
import { createStytchClient } from '@stytch/vanilla-js';

export const stytch = createStytchClient(
  import.meta.env.REACT_APP_STYTCH_PUBLIC_TOKEN,
);
```

--------------------------------

### Get User

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/users/get-user

Fetches the currently logged-in User. Returns null if no user is logged in. The SDK caches this data and refreshes it automatically.

```APIDOC
## GET /v1/users

### Description
Fetches the currently logged-in User. If no User is logged in, this method returns `null`. The Stytch SDK caches this data and refreshes it automatically in the background.

### Method
GET

### Endpoint
/v1/users

### Parameters
#### Query Parameters
- **session_jwt** (string) - Optional - The session JWT to authenticate the request.

### Request Example
```json
{
  "session_jwt": "your_session_jwt"
}
```

### Response
#### Success Response (200)
- **user** (object) - The user object containing user details.
  - **user_id** (string) - The unique identifier for the user.
  - **email_id** (string) - The email address of the user.
  - **status** (string) - The status of the user (e.g., "pending_creation", "active").
  - **created_at** (string) - The timestamp when the user was created.
  - **last_login_at** (string) - The timestamp of the user's last login.
  - **custom_claims** (object) - Custom claims associated with the user.

#### Response Example
```json
{
  "user": {
    "user_id": "usr_test_123",
    "email_id": "test@example.com",
    "status": "active",
    "created_at": "2023-01-01T12:00:00Z",
    "last_login_at": "2023-01-01T12:00:00Z",
    "custom_claims": {}
  }
}
```
```

--------------------------------

### Create Password with Stytch Vanilla JS SDK

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/passwords/create

This snippet demonstrates how to initialize the Stytch client and create a user password using the Stytch Vanilla JS SDK. It requires a public token for initialization and accepts email, password, and session duration as parameters. The function returns a Promise that resolves upon successful password creation or throws an error for invalid inputs or server-side issues.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const createPassword = async () => {
  await stytch.passwords.create({
    email: '${exampleEmail}',
    password: '${examplePassword}',
    session_duration_minutes: 60,
  });
};
```

--------------------------------

### Initialize and Manage Stytch Session with Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/sessions/authenticate-session

This code snippet demonstrates how to initialize the Stytch client with a public token and manage user sessions. It includes logic to authenticate the session if it exists and refreshes it periodically. It also handles clearing the interval on page unload to prevent memory leaks.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

const authenticate = () => {
  if (stytch.session.getSync()) {
    stytch.session.authenticate({
      session_duration_minutes: 60,
    });
  }
};
// Refresh session every 50 minutes
let interval = setInterval(authenticate, 3000000);
window.addEventListener('beforeunload', () => {
  clearInterval(interval);
});
```

--------------------------------

### GET /user

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/users/get-user

Retrieves the currently authenticated user's information. This endpoint is typically used after a user has logged in to fetch their profile details and associated data.

```APIDOC
## GET /user

### Description
Retrieves the currently authenticated user's information. This endpoint is typically used after a user has logged in to fetch their profile details and associated data.

### Method
GET

### Endpoint
/user

### Parameters
#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

const getUser = async () => {
  const user = await stytch.user.get();
  console.log('User:', user);
};
```

### Response
#### Success Response (200)
- **user_id** (string) - The unique ID of the affected User.
- **emails** (array[objects]) - An array of email objects associated with the user.
  - **email_id** (string) - The unique ID for an email address.
  - **email** (string) - The email address.
  - **verified** (boolean) - Indicates if the email address has been verified.
- **phone_numbers** (array[objects]) - An array of phone number objects associated with the user.
- **crypto_wallets** (array[objects]) - An array of crypto wallet objects associated with the user.
- **name** (object) - The name object associated with the user.
  - **first_name** (string) - The user's first name.
  - **last_name** (string) - The user's last name.
- **trusted_metadata** (object) - Custom fields that are trusted and immutable.
- **untrusted_metadata** (object) - Custom fields that are untrusted and mutable.
- **created_at** (string) - The timestamp when the user was created.
- **status** (string) - The status of the User. Possible values are `pending` and `active`.
- **password** (object) - The password object is returned for users with a password.
  - **password_id** (string) - The unique ID of a specific password.
  - **requires_reset** (boolean) - Indicates whether this password requires a password reset.
- **totps** (array[objects]) - An array containing a list of all TOTP instances for a given User.
  - **totp_id** (string) - The unique ID for a TOTP instance.
  - **verified** (boolean) - If this method has been successfully authenticated by the User.
- **webauthn_registrations** (array[objects]) - An array that contains a list of all Passkey or WebAuthn registrations for a given User.
  - **webauthn_registration_id** (string) - The unique ID for the Passkey or WebAuthn registration.
  - **domain** (string) - The domain on which Passkey or WebAuthn registration was started.
  - **user_agent** (string) - The user agent of the User.
  - **authenticator_type** (string) - The authenticator_type string displays the requested authenticator type of the Passkey or WebAuthn device. Valid types are "platform" and "cross-platform".
  - **verified** (boolean) - If this method has been successfully authenticated by the User.
  - **name** (string) - The name of the Passkey or WebAuthn registration.
- **biometric_registrations** (array[objects]) - An array that contains a list of all biometric registrations for a given User.
  - **biometric_registration_id** (string) - The unique ID for a biometric registration.
  - **verified** (boolean) - If this method has been successfully authenticated by the User.
- **roles** (array[strings]) - Roles assigned to this User.
- **request_id** (string) - Globally unique UUID that is returned with every API call.
- **status_code** (number) - The HTTP status code of the response.

#### Response Example
```json
{
  "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
  "emails": [
    {
      "email_id": "email-test-81bf03a8-86e1-4d95-bd44-bb3495224953",
      "email": "sandbox@stytch.com",
      "verified": true
    }
  ],
  "phone_numbers": [],
  "crypto_wallets": [],
  "name": {
    "first_name": "Jane",
    "last_name": "Doe"
  },
  "trusted_metadata": {},
  "untrusted_metadata": {},
  "created_at": "2023-01-01T00:00:00Z",
  "status": "active"
}
```
```

--------------------------------

### Get Recovery Codes

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/totps/get-recovery-codes

Retrieves the recovery codes for a TOTP instance tied to a user. This method requires MFA if the user has enrolled other MFA methods.

```APIDOC
## POST /totps/recovery_codes

### Description
Retrieves the recovery codes for a TOTP instance tied to a user. This method requires MFA if the user has enrolled other MFA methods.

### Method
POST

### Endpoint
`/totps/recovery_codes`

### Parameters
#### Query Parameters
- **stytch_token** (string) - Required - The Stytch session token for the authenticated user.

### Request Body
This endpoint does not accept a request body.

### Request Example
```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('YOUR_PUBLIC_TOKEN');

stytch.totps.recoveryCodes().then(response => {
  console.log(response);
}).catch(error => {
  console.error(error);
});
```

### Response
#### Success Response (200)
- **user_id** (string) - The unique ID of the affected User.
- **totps** (array[objects]) - An array containing a list of all TOTP instances for a given User.
  - **totp_id** (string) - The unique ID for a TOTP instance.
  - **verified** (boolean) - Denotes whether the associated send method (e.g., phone number, email address) has been successfully authenticated by the User.
  - **recovery_codes** (array[strings]) - The recovery codes used to authenticate the user without an authenticator app.
- **request_id** (string) - Globally unique UUID that is returned with every API call. This value is important to log for debugging purposes.
- **status_code** (number) - The HTTP status code of the response.

#### Response Example
```json
{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
  "totps": [
    {
      "totp_id": "totp-test-41920359-8bbb-4fe8-8fa3-aaa83f35f02c",
      "verified": true,
      "recovery_codes": [
        "ckss-2skx-ebow",
        "spbc-424h-usy0",
        "hi08-n5tk-lns5",
        "1n6i-l5na-8axe",
        "aduj-eufq-w6yy",
        "i4l3-dxyt-urmx",
        "ayyi-utb0-gj0s",
        "lz0m-02bi-psbx",
        "l2qm-zrk1-8ujs",
        "c2qd-k7m4-ifmc"
      ]
    }
  ]
}
```

#### Error Responses
- **400 Bad Request**: Invalid public key credential.
- **404 Not Found**: User not found.
- **429 Too Many Requests**: Rate limit exceeded.
- **500 Internal Server Error**: Server error.
```

--------------------------------

### Importing Default Light Theme in Vanilla JS

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/prebuilt-ui/theming

Demonstrates how to import and apply the default light theme for Stytch UI components in a Vanilla JavaScript application. This sets the base styling for the UI elements.

```javascript
import { defaultTheme } from '@stytch/vanilla-js';

const presentation = {
  theme: defaultTheme,
};
```

--------------------------------

### Login or Create User with Email Magic Links

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/email-magic-links/login-or-create

Initiates the login or creation process for a user by sending an email magic link. This method wraps the Stytch Consumer Frontend SDK's `magicLinks.email.loginOrCreate` function.

```APIDOC
## POST /magic-links/email/log-in-or-create

### Description
Initiates the login or creation process for a user by sending an email magic link. This method wraps the Stytch Consumer Frontend SDK's `magicLinks.email.loginOrCreate` function.

### Method
POST

### Endpoint
`/magic-links/email/log-in-or-create`

### Parameters
#### Request Body
- **email** (string) - Required - The email address of the User to send the Magic Link to.
- **Configuration** (object) - Optional - Additional configuration for the magic link.
  - **login_magic_link_url** (string) - Optional - The URL the end user clicks from the login Email Magic Link. If not passed, the default login redirect URL set in your Dashboard is used.
  - **signup_magic_link_url** (string) - Optional - The URL the end user clicks from the sign-up Email Magic Link. If not passed, the default sign-up redirect URL set in your Dashboard is used.
  - **login_expiration_minutes** (int) - Optional - Set the expiration for the login email magic link, in minutes. Default is 1 hour. Minimum is 5 minutes, maximum is 7 days (10080 mins).
  - **signup_expiration_minutes** (int) - Optional - Set the expiration for the sign-up email magic link, in minutes. Default is 1 week. Minimum is 5 minutes, maximum is 7 days (10080 mins).
  - **login_template_id** (string) - Optional - Use a custom template for login emails. Defaults to your default email template.
  - **signup_template_id** (string) - Optional - Use a custom template for sign-up emails. Defaults to your default email template.
  - **locale** (string) - Optional - Used to determine the language for the email. Parameter is an IETF BCP 47 language tag (e.g., "en"). Supported languages: "en", "es", "fr", "pt-br". Defaults to English.

### Request Example
```json
{
  "email": "test@example.com",
  "Configuration": {
    "login_magic_link_url": "https://example.com/login",
    "signup_magic_link_url": "https://example.com/signup",
    "login_expiration_minutes": 30,
    "signup_expiration_minutes": 10080,
    "login_template_id": "your_login_template_id",
    "signup_template_id": "your_signup_template_id",
    "locale": "en"
  }
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the status of the request.
- **user_id** (string) - The ID of the user.
- **session_token** (string) - A token representing the user's session.
- **session_jwt** (string) - A JWT representing the user's session.

#### Response Example
```json
{
  "status": "started",
  "user_id": "user-live-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "session_token": "session-live-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "session_jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c"
}
```
```

--------------------------------

### Stytch WebAuthn Registration Response Examples

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/webauthn/register

This section provides examples of successful and error responses from the Stytch WebAuthn registration API. It covers common HTTP status codes from 200 (success) to 500 (server errors), illustrating potential outcomes and their corresponding error details.

```json
{
  "status_code": 200,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6",
  "webauthn_registration_id": "webauthn-registration-test-5c44cc6a-8af7-48d6-8da7-ea821342f5a6"
}
```

```json
{
  "status_code": 400,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "invalid_public_key_credential",
  "error_message": "Invalid public key credential. Please confirm you're passing a correctly formatted public key credential.",
  "error_url": "https://stytch.com/docs/api/errors/400"
}
```

```json
{
  "status_code": 404,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "user_not_found",
  "error_message": "User could not be found.",
  "error_url": "https://stytch.com/docs/api/errors/404"
}
```

```json
{
  "status_code": 429,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "too_many_requests",
  "error_message": "Too many requests have been made.",
  "error_url": "https://stytch.com/docs/api/errors/429"
}
```

```json
{
  "status_code": 500,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "internal_server_error",
  "error_message": "Oops, something seems to have gone wrong, please reach out to support@stytch.com to let us know what went wrong.",
  "error_url": "https://stytch.com/docs/api/errors/500"
}
```

--------------------------------

### Stytch API Response Status Codes

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/passwords/authenticate

Examples of Stytch API responses for various HTTP status codes. These examples illustrate successful authentication (200), unauthorized credentials (401), email not found (404), too many requests (429), and internal server errors (500).

```json
{
    "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
    "session": null,
    "session_jwt": "",
    "session_token": "",
    "status_code": 200,
    "user": {...},
    "user_id": "user-test-16d9ba61-97a1-4ba4-9720-b03761dc50c6"
}
```

```json
{
  "status_code": 401,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "unauthorized_credentials",
  "error_message": "Unauthorized credentials.",
  "error_url": "https://stytch.com/docs/api/errors/401"
}
```

```json
{
  "status_code": 404,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "email_not_found",
  "error_message": "Email could not be found.",
  "error_url": "https://stytch.com/docs/api/errors/404"
}
```

```json
{
  "status_code": 429,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "too_many_requests",
  "error_message": "Too many requests have been made.",
  "error_url": "https://stytch.com/docs/api/errors/429"
}
```

```json
{
  "status_code": 500,
  "request_id": "request-id-test-b05c992f-ebdc-489d-a754-c7e70ba13141",
  "error_type": "internal_server_error",
  "error_message": "Oops, something seems to have gone wrong, please reach out to support@stytch.com to let us know what went wrong.",
  "error_url": "https://stytch.com/docs/api/errors/500"
}
```

--------------------------------

### Create TOTP with Stytch Vanilla JS SDK

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/totps/create

This snippet demonstrates how to initialize the Stytch client and create a TOTP for a user. It requires a public token and sets an expiration time for the TOTP. The function returns a promise that resolves with the TOTP details or rejects with an error.

```javascript
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

export const create = () => {
  stytch.totps.create({ expiration_minutes: 60 });
};
```

--------------------------------

### Get Tokens

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/methods/sessions/get-tokens

Retrieves the `session_token` and `session_jwt` for an active user session. These tokens are available only if an active session exists and is not managed via HttpOnly cookies. The SDK typically handles token management automatically via cookies.

```APIDOC
## Get Tokens

### Description
Retrieves the `session_token` and `session_jwt` values associated with the logged-in user's active session. Session tokens are only available if there is an active session, and the session is not managed via HttpOnly cookies. If either of these conditions is not met, `getTokens` will return `null`.

### Method
GET (Implicit, as it's a client-side SDK method)

### Endpoint
N/A (Client-side SDK method)

### Parameters
None

### Request Example
```javascript
/* eslint @typescript-eslint/no-unused-vars: ["error", { "varsIgnorePattern": "^tokens$" }] */
import { StytchClient } from '@stytch/vanilla-js';

const stytch = new StytchClient('${publicToken}');

const getTokens = () => {
  if (stytch.session.getSync()) {
    stytch.session.getTokens();
  }
};

// Do something with the tokens, like sending them to another service
const tokens = getTokens();
```

### Response
#### Success Response
- **session_token** (string | null) - The session token for the active session, or `null` if there is no active session or if the session is managed via HttpOnly cookies.
- **session_jwt** (string | null) - The session JWT for the active session, or `null` if there is no active session or if the session is managed via HttpOnly cookies.

#### Response Example
```json
{
  "session_token": "your_session_token_here",
  "session_jwt": "your_session_jwt_here"
}
```

#### Error Response
Returns `null` if no active session or if session is managed via HttpOnly cookies.
```json
{
  "session_token": null,
  "session_jwt": null
}
```
```

--------------------------------

### Migrate Styles to Theme Configuration (JavaScript)

Source: https://stytch.com/docs/api-reference/consumer/frontend-sdks/vanilla-js/upgrade-guide

This snippet demonstrates how to use the `styleToTheme` migration helper function to transition from the older `style` property to the new `presentation.theme` property for Stytch UI theming. It includes importing the helper and configuring the new theme object, with notes on development mode warnings.

```javascript
import { styleToTheme } from '@stytch/your-package-name/compat'; // [!code ++]

const config = {
  style: { ... }, // [!code --]
  // This will also print out the recommended migrated config // [!code ++:3]
  // which should replace this in production
  theme: styleToTheme({ ... }),
};
```
Tokens:
Raw