Set Up an Externally-Managed Login Flow with Next.js and Github

This tutorial demonstrates how to use the sample repo to set up a login flow that is managed by an external provider, in this case GitHub, using a custom login interface that syncs with Wix’s authentication.

Complete the following steps to log a visitor into your site or app with their GitHub credentials:

1. Authorize the member in GitHub and collect their email address.
2. Collect the relevant Wix member ID.
3. Request and store access and refresh tokens for the Wix member ID.

Once the member is logged in, you can redirect them to your home page.

Before you begin

Before getting started, make sure you have the following:

• A Wix account
• A Github account
• A Github App
  • In your github app, be sure to set the following settings:
    • Homepage URL: http://localhost:3000
    • Authorization callback URL: http://localhost:3000/api/auth/github/callback
• A Wix site or Wix Headless project
• A Wix API Key with Members & Contacts permission
• An OAuth App for visitors and members
• A copy of the sample repo
• A custom login interface

Step 1 | Authenticate in GitHub and collect the member’s email address

1. When a visitor first lands on your login page, follow the handle visitors flow.
2. When a member chooses to log in using GitHub on your login page:
   a. Follow the Github OAuth web flow to authenticate users with the @octokit/auth-app package. See the getGithubAuth function.
   a. Once the member has been authenticated by GitHub, call GitHub’s Get the authenticated user endpoint. See the getGithubUserEmail function.

Step 2 | Collect a Wix member ID

Once you have the member’s email addresses, check if any of them are associated with a Wix member ID.

See the getOrCreateWixMember() function. Call the queryMembers() function and filter by the email address collected in step 1:

• If an associated Wix member ID exists, collect it and pass it in the next step.
• If no associated Wix member ID exists, call the createMember() function to create one and collect the returned ID.

Note that creating members without explicit registration is an admin function. Make sure to use a WixClient and pass an API key that has permission to create members. See the serverWixClient.ts file in the sample project.

Step 3 | Request and store Wix access and refresh tokens

Now that you have the Wix member ID, you can request member tokens.

See the getMemberTokensForExternalLogin() function, which passes the member ID collected in step 2.

Note that getting access and refresh tokens is an admin function. Make sure to use the WixClient with your OAuth app that created this visitor, and pass an API key that has permission to create member access tokens, to save the visitor’s activity from before they logged in.

Now you can:

• Store the token in a browser cookie to save the member’s session.
• Redirect the member to your homepage which triggers a client and uses the token in the cookie to make requests on their behalf.