Enabling GitHub as an OAuth provider

For GitHub, we need to collect the following two environment variables:

• GITHUB_CLIENT_ID
• GITHUB_CLIENT_SECRET

Prerequisites

1. Create a GitHub account
2. Sign in to your GitHub account

Creating a GitHub OAuth App

1. Navigate to Settings - either for your personal account or for an organization.
2. Scroll down, and select Developer settings on the left, and then select OAuth Apps.
3. Click New OAuth App (or Register an application). Then, fill in the details - you can put whatever you want for Application Name and Homepage URL, but for Authorization Callback URL, put the URL of your API.

• This does not need to be the full URL (ie, you can include other paths and QSPs), and unlike other providers, GitHub only accepts ONE. That means that if you want to, for example, test this out both locally and in production, you'll need to register a new OAuth application for each environment (/each URL).
• If you're using the default function location, your callback URL will be something like: http(s)://{your domain}/.redwood/functions

4. Click Register application. On the next page, you'll see your Client ID - this is your GITHUB_CLIENT_ID.
5. Click Generate a new client secret. Once that's created, be sure to immediately save it as GitHub won't show it to you again - this is your GITHUB_CLIENT_SECRET.

Using the GitHub environment variables

Go ahead and add the two environment variables that you just collected to your environment. You'll do this in your .env file while working locally, and in your deployment settings for your hosting provider in production.

You'll also need to update redwood.toml's includeEnvironmentVariables parameter to include your GITHUB_CLIENT_ID, otherwise it won't be available to your client, and your client won't be able to kick off the OAuth flow.

Enable GitHub as a provider

Now, you can finally enable GitHub as an OAuth provider!

Go to web/src/auth.ts, and make the following change:

 const oAuthClient = createOAuthClient({
   enabledProviders: {
+    github: true
   },
 })

Then, go to api/src/functions/auth.ts, and make the following change:

  const oAuthHandler = new OAuthHandler(event, context, authHandler, {
    oAuthModelAccessor: 'oAuth',
    enabledProviders: {
+     github: true,
    },
  })