Demo to preview the settings

Introduction

Sign up and log in users with their Github credentials.

Prerequisites

  1. You must have GitHub account.

How to set up

Register your application

Log in to your Github account and navigate to your developer settings to create a new app here: https://github.com/settings/apps
Image without caption

Copy App ID and Secret

Once registered, you'll be given a Client ID and a Client Secret (App Secret), which you will enter into the plugin settings.
Copy the Client ID (not the App ID) and generate a new Client Secret
Copy the Client ID (not the App ID) and generate a new Client Secret
Plugin settings in your app
Plugin settings in your app

User-Agent (shared headers)

Github doesn't have a specific requirement for this field, but you cannot leave it empty. We recommend typing in your application name. You can read about what this is used for here: https://docs.github.com/en/rest/overview/resources-in-the-rest-api?apiVersion=2022-11-28#user-agent-required

Callback URL

Make sure to add a callback URL in the app details page in Github. This is the exact URL for the page in your app that will trigger the signup/login workflow (be mindful of the debugger and "version-test"). You can add multiple Callback URLs.
Alternatively, you can use your generic redirect, which Bubble shows you in the plugin settings.
Image without caption
Generic redirect URL
Generic redirect URL
Make sure you click on "Save" in your Github app settings. Now, you're ready to use the plugin in your app.

Signup / Login Workflow

Add a button to your page design to trigger the signup / login with social network action, and select "Github" as the OAuth provider:
Image without caption
The user will be taken to a login screen to enter their Github credentials and accept this authorization:
Image without caption
Once they're authorized, they'll automatically be redirected back to your Bubble app and be logged in.

User Information

This plugin also comes with a data source to get extra information about the authenticated user.
For example, you can set up a group with this data source to display these details -- just select "Get data from external API", then choose "Github - User"
Make sure the Group's "Type of content" is also "User (Github)"
Image without caption
Now, inside the group, you can display that Github user's information:
Image without caption
Image without caption
Now you're ready to authenticate your users with their Github accounts!

Changelogs

Update 07.02.2023 - Version 2.2.0

  • Updated documentation

Update 24.09.21 - Version 2.1.0

  • Description update

Update 05.05.21 - Version 2.0.0

  • Access token is now provided in the header as per updates to Github’s OAuth system.

Update 01.03.18 - Version 1.1.0

  • Exposed User Agent field. This should be your Github app’s name or Github username

Update 21.11.16 - Version 1.0.0

  • First Publish

Powered by Notaku