hacktoberfest-checker icon indicating copy to clipboard operation
hacktoberfest-checker copied to clipboard

auth with GitHub using nuxt auth module

Open lukeocodes opened this issue 5 years ago • 8 comments

Editing with info for anyone who wants to help with this one.

There are a few ways to connect to GitHub APIs.

One is using a static personal access token (mine), which is stored as an environment variable and deployed to the Netlify Function (AWS Lambda function) that connects to GitHub.

Another way is to have a user of the site "Login with GitHub", they then get an Acess Token which can be stored in the memory of the frontend application (not in cookies or local storage), then sent through to the Netlify Function whenever they make a request. Not only for this purpose, but it also will provide the users GitHub profile information, to enrich the experience on the site (i.e. they could track their entire Hacktoberfest progress).

There are packages like nuxt-auth that will make some of this work easier, but from my own experimentation, those packages offered incomplete solutions. I believe I was closest with nuxt-auth, which appeared to be using an auth code grant, but I should have created a new Netlify Function to act as the backend to exchange the authorization code for an access token.

GitHub has some guides on building an OAuth application.

lukeocodes avatar Oct 15 '20 17:10 lukeocodes

I would like to pick this one @lukeocodes Could you provide more info on this?

git-srinivas avatar Oct 17 '20 15:10 git-srinivas

@git-srinivas I would like to be able to log in to GitHub from the Nuxt application, hopefully without the need for a backend. If you need a backend, please create a Netlify function to act as the backend.

lukeocodes avatar Oct 19 '20 11:10 lukeocodes

okay and also i need to create a form for user credentials?

git-srinivas avatar Oct 19 '20 12:10 git-srinivas

No, you should use GitHub OAuth2 workflow

lukeocodes avatar Oct 19 '20 15:10 lukeocodes

okay.

git-srinivas avatar Oct 19 '20 15:10 git-srinivas

@git-srinivas I would like to be able to log in to GitHub from the Nuxt application, hopefully without the need for a backend. If you need a backend, please create a Netlify function to act as the backend.

I could see that we are already authenticated with github personal access token and able to get repositories information. You mean to provide login functionality to the website visiting user?

git-srinivas avatar Oct 20 '20 17:10 git-srinivas

Hi and yes. I should have updated the issue when you first showed interest, sorry for the lack of info.

There are a few ways to connect to GitHub APIs.

One is using a static personal access token (mine), which is stored as an environment variable and deployed to the Netlify Function (AWS Lambda function) that connects to GitHub.

Another way is to have a user of the site "Login with GitHub", they then get an Acess Token which can be stored in the memory of the frontend application (not in cookies or local storage), then sent through to the Netlify Function whenever they make a request. Not only for this purpose, but it also will provide the users GitHub profile information, to enrich the experience on the site (i.e. they could track their entire Hacktoberfest progress).

There are packages like nuxt-auth that will make some of this work easier, but from my own experimentation, those packages offered incomplete solutions. I believe I was closest with nuxt-auth, which appeared to be using an auth code grant, but I should have created a new Netlify Function to act as the backend to exchange the authorization code for an access token.

GitHub has some guides on building an OAuth application.

lukeocodes avatar Oct 21 '20 05:10 lukeocodes

No worries. I will go through the documentation and thanks for the info 👍

git-srinivas avatar Oct 21 '20 07:10 git-srinivas