open-index/open-npm huggingface dataset:
npm package: @stytch/headless-client
Description: This package contains interfaces and implementations for the Stytch Javascript SDK API Clients and services.
Author: Stytch
Latest version: 0.1.2

# Stytch Javascript SDK - Headless Client

This package contains interfaces and implementations for the Stytch Javascript SDK API Clients and services.

The API Clients are each associated with a Stytch product (EML, OTP, etc), and act as proxies to the Stytch API. The API client exposes methods with strongly typed parameters and response types. Developers use these methods to interact with the Stytch API, and know what data shapes are expected in requesets and responses.

The services (PKCEManager, SessionManager, etc) are used to build the StytchClient objects that each specific SDK exposes to end users. These services control Stytch SDK logic such as session refreshes, telemetry, persistent storage, and coordination of data/state across all API Clients and services.
npm package: @stytch/nextjs
Description: Stytch's official Next.js Library
Author: Stytch
Latest version: 22.0.5

# @stytch/nextjs

Stytch's Next.js Library

## Install

With `npm`:

```shell
npm install @stytch/nextjs --save
```

## Documentation

This package contains several entrypoints, depending on if you are using the B2B or B2C stytch product.

```javascript
// Stytch B2C Product
import { createStytchClient, StytchProvider } from '@stytch/nextjs';

// The headless entrypoint does not bundle UI elements, and is a much smaller package
import { createStytchClient } from '@stytch/nextjs/headless';

// Stytch B2B Product
import { createStytchB2BClient, StytchB2B } from '@stytch/nextjs/b2b';

// The headless entrypoint does not bundle UI elements, and is a much smaller package
import { createStytchB2BClient } from '@stytch/nextjs/b2b/headless';
```

For full documentation please refer to Stytch's JavaScript SDK documentation on https://stytch.com/docs/sdks.

## Example Usage

```javascript
import { createStytchClient, Products, StytchProvider } from '@stytch/nextjs';

const stytch = createStytchClient('public-token-<find yours in the stytch dashboard>');

// Wrap your App in the StytchProvider
const Root = () => (
  <StytchProvider stytch={stytch}>
    <App />
  </StytchProvider>
);

// Now use Stytch in your components
const App = () => {
  const config = {
    products: [Products.emailMagicLinks],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      loginExpirationMinutes: 30,
      signupRedirectURL: 'https://example.com/authenticate',
      signupExpirationMinutes: 30,
      createUserAsPending: true,
    },
  };

  const presentation = {
    theme: { primary: '#0577CA' },
    options: {},
  };

  const callbacks = {
    onEvent: (message) => console.log(message),
    onError: (message) => console.log(message),
  };

  return (
    <div id="login">
      <StytchLogin config={config} presentation={presentation} callbacks={callbacks} />
    </div>
  );
};
```

## TypeScript Support

There are built in TypeScript definitions in the npm package.

## Migrating from @stytch/stytch-react

See [this migration guide](./docs/stytch-react-migration.md)
npm package: @stytch/react
Description: Stytch's official React Library
Author: Stytch
Latest version: 20.0.5

# @stytch/react

Stytch's React Library

## Install

With `npm`:

```shell
npm install @stytch/react --save
```

## Documentation

For full documentation please refer to Stytch's JavaScript SDK documentation at https://stytch.com/docs/sdks.

## Example Usage

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

const stytch = createStytchClient('public-token-<find yours in the stytch dashboard>');

// Wrap your App in the StytchProvider
// (If you are using app router this need to be in a separate file with a 'use client' directive)
const Root = () => (
  <StytchProvider stytch={stytch}>
    <App />
  </StytchProvider>
);

// Now use Stytch in your components
const App = () => {
  const config = {
    products: [Products.emailMagicLinks],
    emailMagicLinksOptions: {
      loginRedirectURL: 'https://example.com/authenticate',
      loginExpirationMinutes: 30,
      signupRedirectURL: 'https://example.com/authenticate',
      signupExpirationMinutes: 30,
      createUserAsPending: true,
    },
  };

  const presentation = {
    theme: { primary: '#0577CA' },
    options: {},
  };

  const callbacks = {
    onEvent: (message) => console.log(message),
    onError: (message) => console.log(message),
  };

  return (
    <div id="login">
      <StytchLogin config={config} presentation={presentation} callbacks={callbacks} />
    </div>
  );
};
```

## TypeScript Support

There are built in TypeScript definitions in the npm package.

## Migrating from @stytch/stytch-react

See [this migration guide](./docs/stytch-react-migration.md)
npm package: @stytch/react-native-modules
Description: Custom native modules for use in the Stytch React Native SDK
Author: Stytch
Latest version: 0.2.9
Deprecated: This package is now deprecated. Please use the @stytch/react-native package for all React Native projects. More information here: https://stytch.com/docs/sdks/react-native-sdk#resources_migration-guide
npm package: @stytch/stytch-react
Description: Stytch's official React Library
Author: Stytch
Latest version: 4.1.2
Deprecated: This package has been deprecated in favor of @stytch/react. A migration guide may be found in the @stytch/react README. Please contact support@stytch.com with any questions.

# Note

This repository is no longer used for active development. Please make future PRs in the
new [js-sdk-turbo](https://github.com/stytchauth/js-sdk-turbo) repository. We will continue
to fix bugs and security vulnerabilities in this repository until this version of the SDK
is sunsetted.

## Stytch-React

Stytch's React Library

## Install

With `npm`
`npm install @stytch/stytch-react --save`

## Documentation

For full documentation please refer to Stytch's javascript SDK documentation on https://stytch.com/docs/sdks.

## Example Usage

```javascript
import { Stytch } from "@stytch/stytch-react";

const App = () => {
  const stytchProps = {
    loginOrSignupView: {
      products: ["emailMagicLinks"],
      emailMagicLinksOptions: {
        loginRedirectURL: "https://example.com/authenticate",
        loginExpirationMinutes: 30,
        signupRedirectURL: "https://example.com/authenticate",
        signupExpirationMinutes: 30,
        createUserAsPending: true,
      },
    },
    style: {
      fontFamily: '"Helvetica New", Helvetica, sans-serif',
      width: "321px",
      primaryColor: "#0577CA",
    },
    publicToken: "public-token-111-111-1234",
    callbacks: {
      onEvent: (message) => console.log(message),
      onSuccess: (message) => console.log(message),
      onError: (message) => console.log(message),
    },
  };

  return (
    <div id="login">
      <Stytch
        publicToken={stytchProps.publicToken}
        loginOrSignupView={stytchProps.loginOrSignupView}
        style={stytchProps.style}
        callbacks={stytchProps.callbacks}
      />
    </div>
  );
};
```

## Typescript Support

There are built in typescript definitions in the npm package.

### Changelog
**[3.0.1] - 2020-8-25**
- `@stytch/stytch-js` has been bumped to include new OAuth types
- `SDKProductTypes` and `OAuthProvidersTypes` are now re-exported for convenience
- Dependency bumps

**[3.0.0] - 2020-8-1**
- This package now uses the [@stytch/stytch-js](https://www.npmjs.com/package/@stytch/stytch-js) library to load stytch.js