Sign In with Google or Facebook (JS SDK)

In This Article

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.

Important: Wix's Astro integration doesn't currently support this flow. Instead, add a Wix login page and enable your providers as sign-in buttons on that page.

To sign members in with a provider Wix doesn't support, such as GitHub, see Bring Your Own Identity Provider, where your backend runs the provider's OAuth.

Before you begin

Before starting to code, make sure that you:

Set up an SDK client with your client ID.
Set your callback URL as an allowed authorization redirect URI.

Step 1 | Set up a Wix client

Create a Wix client with your client ID:

Copy

Find your client ID in your project's Headless 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:

Copy

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:

Copy

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.

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:

Copy

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:

Copy

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

Copy

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

Copy

To refresh tokens or log the member out, see Add a Wix Login Page (JS SDK).

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 without passing idp.