GitHub Authentication

This guide will walk you through integrating a "Continue with GitHub" button into your signup, login, and profile forms. Part one walks you through setting up your GitHub Developer Account step by step. Part two covers how to configure Github Authentication in Memberstack and add the button to your front-end forms.

📋 Prerequisites

Before you begin, ensure you have:

• A Memberstack account
• A GitHub account
• Access to your website code or Webflow project

1) GitHub OAuth App Setup

Step 1: Create a GitHub OAuth App

1. Navigate to GitHub's Developer Settings.

2. Click New OAuth App.

3. Fill in the required fields:

   • Application name: Your app's name (e.g., "YourSite Auth")
   • Homepage URL: Your website's URL (e.g., https://yourdomain.com)
   • Authorization callback URL:
     

     Use:

     https://client.memberstack.com/auth/callback

     Otherwise, if you're using a custom domain, use:

     https://memberstack-client.yourdomain.com/auth/callback

     (Make sure to replace yourdomain.com with your actual domain name.)

4. Click Register application.

⚠️ Note: Ensure the Authorization callback URL matches exactly, as GitHub requires an exact match for OAuth redirection.

Step 2: Retrieve Client ID and Client Secret

1. After registering, you'll be redirected to your app's page.
2. Here, you'll find your Client ID.
3. Click Generate a new client secret to obtain your Client Secret.

⚠️ Important: Store your Client Secret securely. Do not share it publicly.

2) GitHub Setup in Memberstack and Webflow

Step 1: Configure GitHub in Memberstack

1. Log in to your Memberstack dashboard.
2. Navigate to Settings > Auth Providers.
3. Click the Configure button next to GitHub.

1. Enter your Client ID and Client Secret obtained from GitHub.

2. Toggle the switch to enable GitHub Auth, then click Save.

   

Step 2: Add the GitHub Button to Your Signup Form

1. Copy either the Light Theme Github Button or the Dark Theme Github Button from Memberstack's Social Auth Components.

1. Paste the button inside your signup or login form in Webflow.
2. Ensure the button has the attribute: data-ms-auth-provider="github".

⚠️ Important: The GitHub button must be placed inside a proper Memberstack signup or login form for it to work properly.

Step 3: Publish and Test

1. Publish your Webflow site to make the changes live.
2. Navigate to your live site and click the "Continue with GitHub" button.
3. You should be redirected to GitHub for authentication and then back to your site with a successful login session.

3) FAQ

Can members login using a sign up form?

Yes! By default, members who already have an account will automatically be logged.

Can members sign up using a login form?

By default no, but you can enable sign ups in login forms by adding a new attribute to your login modal buttons. Here's a 1-minute video tutorial showing how to add the attributes.

1. Add the data-ms-social-auth-allow-signup attribute to your custom login forms (data-ms-form="login").
2. Add the data-ms-social-auth-allow-signup attribute to your login modal buttons (data-ms-modal="login").

Once complete, your social auth buttons will create accounts for new members.

Profile Forms

In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers.

Social Auth Buttons in Profile Forms

4) Troubleshooting & Common Errors

❌ Button Not Triggering Popup?

Cause: The GitHub button may not be inside the correct container or missing required attributes.

✅ Fix:

1. Ensure the button is placed inside the signup or login form, not elsewhere.

2. Verify that the data-ms-auth-provider="github" attribute is correctly set.
                                                                                                                                                           
❌ Error: invalid_client

Cause: The Client Secret was copied incorrectly.

✅ Fix:

1. Go to your GitHub app's settings.

2. Click Generate a new client secret and copy the new value.

3. Update the Client Secret in Memberstack with the new value.
                                                                                                                                                            
❌ "Redirect URI mismatch" Error

Cause: The Authorization callback URL in GitHub doesn't match Memberstack's expected URL.

✅ Fix:

1. Ensure that the Authorization callback URL in your GitHub OAuth App is set to:

https://client.memberstack.com/auth/callback

Otherwise, if you're using a custom domain, use:

https://memberstack-client.yourdomain.com/auth/callback

(Make sure to replace yourdomain.com with your actual domain name.)
                                                                                                                                                             
❌ Error: 404 Page Not Found when testing GitHub Authentication on your website

Cause: A common cause is accidentally copying a space before or after the Client ID or Client Secret into Memberstack.

✅ Fix:

1. Go to your GitHub Authentication settings in Memberstack.

2. Carefully check for and remove any leading or trailing spaces from both the Client ID and Client Secret fields.

3. Click Save and try again.

Tip: Even a single invisible space copied from GitHub can break the OAuth request.