> 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 Google or Facebook (JS SDK)

## Article: Sign In with Google or Facebook (JS SDK)

## Article Link: https://dev.wix.com/docs/go-headless/authentication/members/identity-providers/sign-in-with-google-or-facebook-js-sdk.md

## Article Content:

# Sign In with Google or Facebook (JS SDK)

Let members sign in with their **Google** or **Facebook** account. You add a login interface, like a **Sign in with Google** button, to your own site whose handler starts the login flow. For Wix Studio enterprise and Wix Channels sites, the same flow also works with custom OpenID Connect (OIDC) connections.

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.

<blockquote class="important">

**Important:** [Wix's Astro integration](https://dev.wix.com/docs/go-headless/wix-managed-headless/about-the-astro-integration.md) doesn't currently support this flow. Instead, [add a Wix login page](https://dev.wix.com/docs/go-headless/authentication/members/wix-login-page/add-member-login-with-the-astro-integration.md) and enable your providers as sign-in buttons on that page.

</blockquote>


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/authentication/members/identity-providers/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 an SDK client](https://dev.wix.com/docs/go-headless/authentication/setup/create-an-sdk-client-with-oauth.md) with your client ID.
- Set your callback URL as an [allowed authorization redirect URI](https://dev.wix.com/docs/go-headless/authentication/setup/allow-redirect-uris-and-domains.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 [Add a Wix Login Page (JS SDK)](https://dev.wix.com/docs/go-headless/authentication/members/wix-login-page/add-a-wix-login-page-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/authentication/members/wix-login-page/add-a-wix-login-page-js-sdk.md) without passing `idp`.

## See also

- [Add a Wix Login Page (JS SDK)](https://dev.wix.com/docs/go-headless/authentication/members/wix-login-page/add-a-wix-login-page-js-sdk.md)
- [Bring Your Own Identity Provider](https://dev.wix.com/docs/go-headless/authentication/members/identity-providers/bring-your-own-identity-provider.md)
- [OAuthStrategy reference](https://dev.wix.com/docs/sdk/core-modules/sdk/oauth-strategy.md)