# Stytch Javascript SDK

[![Slack Link](https://img.shields.io/badge/chat-stytch.slack.com-FD4E43)](https://stytch.slack.com)

## Installation

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

## Usage

The vanilla Stytch Javascript SDK is built on open web standards and is compatible with all Javascript frameworks.

### **B2C** `StytchUIClient`

The Stytch UI Client provides methods for interacting with the Stytch API from a browser environment, along with prebuilt UI components such as our login form.

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

const stytch = new StytchUIClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrCreate('charles.babbage@example.com');

// Render prebuilt UI
stytch.mountLogin({
  elementId: '#magic-link',
  config: {
    products: ['emailMagicLinks', 'oauth'],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      loginExpirationMinutes: 30,
      signupRedirectURL: 'https://example.com/authenticate',
      signupExpirationMinutes: 30,
      createUserAsPending: true,
    },
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }, { type: 'apple' }],
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/authenticate',
    },
  },
});
```

### **B2C** `StytchHeadlessClient`

Developers that don't use Stytch UI elements can use the `StytchHeadlessClient` instead, which is _significantly_ smaller!

```js
import { StytchHeadlessClient } from '@stytch/vanilla-js/headless';

const stytch = new StytchHeadlessClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrCreate('charles.babbage@example.com');
```

### **B2B** `StytchB2BUIClient`

The Stytch UI Client provides methods for interacting with the Stytch API from a browser environment, along with prebuilt UI components such as our login form.

```js
import { StytchB2BUIClient } from '@stytch/vanilla-js/b2b';

const stytch = new StytchB2BUIClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrSignup({
  email_address: 'charles.babbage@example.com',
  organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
});

// Render prebuilt UI
stytch.mount({
  elementId: '#magic-link',
  config: {
    authFlowType: 'Discovery',
    products: ['emailMagicLinks', 'oauth'],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/authenticate',
    },
    oauthOptions: {
      providers: [{ type: 'google' }, { type: 'microsoft' }],
      loginRedirectURL: 'https://example.com/authenticate',
      signupRedirectURL: 'https://example.com/authenticate',
    },
    sessionOptions: {
      sessionDurationMinutes: 60,
    },
  },
});
```

### **B2B** `StytchB2BHeadlessClient`

Developers that don't use Stytch UI elements can use the `StytchB2BHeadlessClient` instead, which is _significantly_ smaller!

```js
import { StytchB2BHeadlessClient } from '@stytch/vanilla-js/b2b/headless';

const stytch = new StytchB2BHeadlessClient('public-token-test-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

// Call Stytch APIs from the browser
stytch.magicLinks.email.loginOrSignup({
  email_address: 'charles.babbage@example.com',
  organization_id: 'organization-test-07971b06-ac8b-4cdb-9c15-63b17e653931',
});
```

For more information on how to use the Stytch SDK, please refer to the
[docs](https://stytch.com/docs/sdks).

## See Also

- For usage with React: see the [@stytch/react](https://www.npmjs.com/package/@stytch/react) library
  and [sample app](https://github.com/stytchauth/stytchjs-react-magic-links)
- For usage with Next.js: see the [@stytch/nextjs](https://www.npmjs.com/package/@stytch/nextjs) library
  and [sample app](https://github.com/stytchauth/stytch-nextjs-integration)
