> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Sign In with an Identity Provider Using the JS SDK

## Article: Sign in with an Identity Provider

## Article Link: https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/external-identity-provider/sign-in-with-an-identity-provider-using-the-js-sdk.md

## Article Content:

# Sign In with an Identity Provider Using the JS SDK

Let members sign in with an identity provider that Wix supports. This covers **Google**, **Facebook**, and, for Wix Studio enterprise and Wix Channels sites, custom OpenID Connect (OIDC) connections. You add a login interface, like a **Sign in with Google** button, to your own site whose handler starts the login flow.

Wix runs the authentication flow, so you don't need to build a login page, manage the provider's OAuth flow, or use an API key. The member simply signs in with their existing account.

To sign members in with a provider Wix doesn't support, such as GitHub, see [Bring Your Own Identity Provider](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/external-identity-provider/bring-your-own-identity-provider.md), where your backend runs the provider's OAuth.

## Before you begin

Before starting to code, make sure that you:

- [Set up a Wix client](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/oauth/create-a-client-for-authentication-with-oauth.md) with your client ID.
- Set your callback URL as an [allowed authorization redirect URI](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/add-allowed-authorization-redirect-uris.md).

## Step 1 | Set up a Wix client

Create a [Wix client](https://dev.wix.com/docs/sdk/core-modules/sdk/wix-client.md) with your client ID:

```js
import { createClient, OAuthStrategy } from '@wix/sdk';
import { members } from '@wix/members';

const myWixClient = createClient({
  modules: { members },
  auth: OAuthStrategy({ clientId: '<YOUR_CLIENT_ID>' }),
});
```

Find your client ID in your project's [Headless Settings](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings), under **Headless clients**. In a CLI project, it's also available as the `appId` in your `wix.config.json` file.

## Step 2 | Generate and store OAuth data

In the handler for your **Sign in with Google** (or similar) button, generate the OAuth data for the login and store it so it's available on your callback page:

```js
const loginRequestData = myWixClient.auth.generateOAuthData(
  'https://www.mysite.com/callback', // Redirect URI, an allowed authorization redirect URI
  'https://www.mysite.com/login',    // URL to return the member to after login
);

localStorage.setItem('wixOAuthData', JSON.stringify(loginRequestData));
```

## Step 3 | Redirect the member to the provider

Request the auth URL with the `idp` option, then redirect. This is the only step that differs from a standard Wix login page:

```js
const { authUrl } = await myWixClient.auth.getAuthUrl(loginRequestData, {
  idp: 'google', // 'google' or 'facebook'
});

window.location.href = authUrl;
```

Wix sends the member straight to the provider's sign-in page. After they authenticate, Wix redirects them back to your redirect URI with `code` and `state` in the URL fragment.

> **Note:** Custom OpenID Connect (OIDC) connections, such as your own single sign-on (SSO) provider, are available only for Wix Studio enterprise and Wix Channels sites. Eligible sites have **SSO settings** in the dashboard, where you can configure a connection and get its ID. To sign members in through such a connection, pass `idp: { connectionId: '<CONNECTION_ID>' }` instead of a provider name. Wix still runs the flow. To learn more, see [Setting up SSO](https://support.wix.com/en/article/sso-setting-up-single-sign-on-sso-login-for-your-site-members).

## Step 4 | Exchange the code for member tokens

On your callback page, retrieve the stored OAuth data, parse the values returned in the URL, and exchange the code for member tokens:

```js
const oAuthData = JSON.parse(localStorage.getItem('wixOAuthData'));

const returnedOAuthData = myWixClient.auth.parseFromUrl();
if (returnedOAuthData.error) {
  // Login failed. Show returnedOAuthData.errorDescription to the member.
  return;
}

const tokens = await myWixClient.auth.getMemberTokens(
  returnedOAuthData.code,
  returnedOAuthData.state,
  oAuthData,
);

myWixClient.auth.setTokens(tokens);
```

The member is now logged in.

## Step 5 | Persist the session and make API calls

Store the tokens so the member stays signed in across page loads. For example, in `localStorage`:

```js
localStorage.setItem('wixTokens', JSON.stringify(tokens));
```

When the member returns, create the client with the stored tokens so calls run as that member:

```js
const myWixClient = createClient({
  modules: { members },
  auth: OAuthStrategy({
    clientId: '<YOUR_CLIENT_ID>',
    tokens: JSON.parse(localStorage.getItem('wixTokens')),
  }),
});
```

You can now make authenticated API calls as the member. For example, get the current member's details:

```js
const { member } = await myWixClient.members.getCurrentMember();
```

To refresh tokens or log the member out, see [Handle Members with a Wix Login Page](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/wix-login-page/wix-login-page-using-the-js-sdk.md).

> **Note:** You can also send members to the Wix login page, where each available provider appears as a button alongside email login and members choose how to sign in. To do so, follow the standard [Wix login page flow](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/wix-login-page/wix-login-page-using-the-js-sdk.md) without passing `idp`.

## See also

- [Handle Members with a Wix Login Page](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/wix-login-page/wix-login-page-using-the-js-sdk.md)
- [Bring Your Own Identity Provider](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/members/external-identity-provider/bring-your-own-identity-provider.md)
- [OAuthStrategy reference](https://dev.wix.com/docs/sdk/core-modules/sdk/oauth-strategy.md)