Sign In with an Identity Provider Using the JS SDK

In This Article

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, where your backend runs the provider's OAuth.

Before you begin

Before starting to code, make sure that you:

Set up a Wix 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 Handle Members with a Wix Login Page.

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.