Implementing 3rd party authorization

Hi everyone!

I’m building an app in redwood where users can track feature development by linking related github PRs, issues, and users together and then view these “features” on a dashboard.

I have auth setup and working through netlify, as well as a db entry created for each user on their first auth.

What I am struggling with at the moment is conceptualizing how github authorization should work. I’ve registered an app on the github dev dashboard and have my client ID and secret but I am not 100% where to make the call to authorize my redwood app with github and grant permissions for a user.

I have done this before in a traditional web/api app with node and react using the spotify API but I am struggling to translate this to the serverless world. Do I just create a Function that triggers the github auth flow? How do I call it from the client code?

Anyway, here is my repo I am working from if it helps, https://github.com/cephalization/featureful

Looking forward to any help and discussions!

1 Like

Hey @cephalization - I think you’ll largely take care of this flow from the client side of your app, except for a few small exchanges with your API, saving and retrieving a couple tokens.

The process is documented here.

In a Redwood App, I might break down the entire flow with something like this:

  1. User signs up

  2. User clicks “Authorize Github Access” button

    • I create and save a random state string to the users db record
    • and then redirect the user to the Github Auth URL (with params)
  3. User authorizes access and is redirected back to my app with a code param

  4. If the state param matches the original (from step 2) I POST the code param to the access token URL, then…

  5. I capture the response and save the token to user’s record in the DB.

I’m pretty sure that should do it. If you get stuck or would like to work through anything together I’d be happy to help.

  • edit: Just another thought. You could probably add a tiny bit more security by moving the last two steps to the API side. Basically you’d post your code from step 4 to your API and then complete the final hand-off on the API side from within your services. Not required, but certainly worth some thought.
1 Like

This flow sounds like just what I needed, thanks!

I will attempt to implement it tonight after work. Pushing those last two steps to the backed would be done in a service rather than Function right? Like GetGithubAuthorization which would return auth from the db or start the flow if it doesn’t exist?

Right.

First, I would add the githubToken (or whatever you want to call it) to my user schema. yarn rw db save, yarn rw db up.

Then I would create a two new mutation/input objects in my Users sdl—one for receiving the Github Auth Code and one for saving the final Auth Token. Then I would create matching functions in my Users service.

The handleCode function does most of the lifting. It receives the Code from my front-end, sends it off to Github using fetch (or whatever method you prefer) and hands that response to my saveToken function which saves it to my User via the Prisma API.

Bam!

1 Like

Also, once you get this up and running you might think about creating a small example app to add to Awesome Redwood as a reference. I think it could help a lot of people! Just a thought :smile:

I’ll see what I can do, thanks! I’m a bit rusty around mutations/sdl/service flow since I am new to graphql but I think I can figure it out sans generator with a couple more passes over that section of the tutorial.

Rock. Let me know if you get stuck.

@danny Do you think you could offer a few pointers here, on integrating GitHub auth? Given that I just signed up for tape.sh using it :sunglasses:

For the record, I’ve got sign in using github over netlify working but that doesnt not authorize the app to perform github actions

Awesome, we started the custom auth journey a while ago, but this thread still holds true for anyone looking for more info. The code snippets on the first post cover how to handle exchange of the authorisation code.

1 Like

Success! Thanks to the help here and on discord I was able to implement this flow:

  • User logs in to app via netlify identity

  • Generate github authorization link on the web client using non-sensitve data

  • Github redirects user back to web client with a ‘code’

  • Web client calls serverless Function with code and current user ID, renders null and awaits a response

  • Serverless Function gets code, user ID, and calls the github access token endpoint; On response it saves the access token to the user object in the DB using the user ID

  • Function responds back to web client telling it that the user is authorized

  • Web client routes user to dashboard, currentUser now contains the github access token

2 Likes

That’s great news. I actually have a need to do something similar in a new app – but using Netlify instead of GitHub: https://www.netlify.com/blog/2016/10/10/integrating-with-netlify-oauth2/ … so that can use the user’s Netlify access token to list their sites, etc.

Netlify has some sample code: https://github.com/netlify/netlify-oauth-example/blob/master/example/app.js but from 2016 waaay before they had serverless functions.

This is much more recent: https://github.com/netlify-labs/oauth-example

I’ll definitely follow the same pattern.

1 Like