Need Open Sauced GitHub Login

[bdougie]

Type of feature

Feature

Current behavior

The user profile is currently a placeholder. Need a GitHub login to confirm the following

• stars
• Open sauced goals account
• public comments

Desired solution

We can mirror the logging from github.com/bdougie/live or github.com/open-sauced/open-sauced

1. Add login functionally to the Astro app
2. Replaces the Generic Avatar with the logged in user Avatar

Additional context

The open sauced login is powered by a GitHub App Id

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[bdougie]

Doing some light research and think Netlify with is the way to go here.

https://docs.netlify.com/visitor-access/identity/

[0-vortex]

Have used it in some demos to emulate GitHub login with multiple headless CMS - in those setups nothing was managed by Netlify, all the rights being handled by GitHub repository access rights, IE if you had push access to the repo you could commit the changes.

Not a big fan of frontend stuff but could maybe pick this up if you are not rushing too much!

[nulfrost]

I can take a look at this, there might need to be some things set up on the netlify end but if that's good to go I'll start working on this as soon as I can

[nulfrost]

.take

[github-actions[bot]]

Thanks for taking this on! If you have not already, join the conversation in our Discord

[bdougie]

I setup Netlify Identity with custom GitHub OAuth:

endpoint: https://hot.opensauced.pizza/.netlify/identity

[bdougie]

Some more context. Login and Logout should be linked in the nav. This can be addressed in this issue or a future, just leaving here for context. Font awesome codes are below.

fa-sign-in

fa-sign-out

[nulfrost]

Making some progress 👍🏿 is there a way to only show the github login button on the widget? doing some google searching but haven't found anything yet

[bdougie]

I don't think that is possible without creating a new (fork) widget. Using GoTru directly is what supabase is doing as well.

But for the sake of keeping the scope small, leaving the email in, for now, is fine. I may explore supabase for this in the future to simplify things.

[nulfrost]

Hey! So picking up on this again and getting this error when trying to log in with github

the link it is referring to leads here https://docs.onegraph.com/docs/authentication.html#asking-your-user-to-sign-in

and another relevant error

As I was typing this I kind of figured maybe the redirect url / callback url are probably configured for the live site and not localhost? if so then I have most of the code already done and would just need to test in the live environment. Let me know what you think

[bdougie]

Sorry about that I gave you the oauth for opensauced.pizza which redirects to the onegraph AuthGuardian service. I just created a new GitHub service specifically for this project. If you try again it should redirect to NEtlify and authorize from there.

https://docs.netlify.com/visitor-access/oauth-provider-tokens/

[nulfrost]

Hmm, still seem to be facing errors related to authentication. I've read and double-checked the documentation for the widget but I don't think I'm missing anything 🤔

Here are some of the errors I've encountered

and this one is the same from the last post

also I'm not sure if this is relevant or not but here's the code I implemented for the github auth stuff

import { useState, useEffect } from "react";
import netlifyIdentity from "netlify-identity-widget";

export const useNetlifyAuth = () => {
  const [user, setUser] = useState(null);

  useEffect(() => {
    netlifyIdentity.init();
    setUser(netlifyIdentity.currentUser());
  }, [user]);

  return {
    user,
    login: netlifyIdentity.open,
  };
};

I don't think I'm missing anything but here's the branch I'm currently working on too if you wanted to take a look, https://github.com/nulfrost/hot/tree/add-github-login

[bdougie]

unrelate note: Tried running your branch locally and getting a "esbuild-darwin-arm64" error. I needed to remove it to get it to work. Curious what that was for. Are you working in a Linux environment that needed that?

netlify-identity will not work

I don't we will be able to use the netlfy identity widget. The requirement to have email is also weird for this use case of github login. I did some quick searching and ran into this thread https://github.com/netlify/gotrue/issues/114#issuecomment-362004553. Basically, we should be leaning on the go-true service instead. Luckily supabase already integrates that into its service. The changes implemented #67 include supabase-js and Netlify.

supabase-auth is the solution

Thank you for running through this, but supabase + github is the way to go on this. It will provide us role-level security with the DB and has a lot of community support.

Since the keys are already embedded in the database.js, you can use that to add login. You may want to refactor that or leverage your auth files instead.

//login session can be added to your custom hook 
async function signInWithGithub() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'github',
  })
}

//logout
async function signout() {
  const { error } = await supabase.auth.signOut()
}

Ironically, I stumbled on this article while researching all this, which wasn't helpful since it is 5+ years old. https://www.netlify.com/blog/2017/10/30/how-to-add-netlify-identity-service-to-react-projects/ t

[nulfrost]

unrelate note: Tried running your branch locally and getting a "esbuild-darwin-arm64" error. I needed to remove it to get it to work. Curious what that was for. Are you working in a Linux environment that needed that?

Working on an M1 macbook, for some reason without it I wasn't able to start the dev server

netlify-identity will not work

I don't we will be able to use the netlfy identity widget. The requirement to have email is also weird for this use case of github login. I did some quick searching and ran into this thread netlify/gotrue#114 (comment). Basically, we should be leaning on the go-true service instead. Luckily supabase already integrates that into its service. The changes implemented #67 include supabase-js and Netlify.

supabase-auth is the solution

Thank you for running through this, but supabase + github is the way to go on this. It will provide us role-level security with the DB and has a lot of community support.

Since the keys are already embedded in the database.js, you can use that to add login. You may want to refactor that or leverage your auth files instead.

//login session can be added to your custom hook 
async function signInWithGithub() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'github',
  })
}

//logout
async function signout() {
  const { error } = await supabase.auth.signOut()
}

Ironically, I stumbled on this article while researching all this, which wasn't helpful since it is 5+ years old. https://www.netlify.com/blog/2017/10/30/how-to-add-netlify-identity-service-to-react-projects/ t

Sweet! I'll take a look at this tonight, I've worked with supabase before so it's all very familiar

[0-vortex]

Make sure you have node>=14 and npm@8 and then do this:

git restore package.json npm-shrinkwrap.json -s upstream/main
npm ci
npm install --save netlify-identity-widget

If you did not clone with gh cli, replace upstream/main with origin/main to get the changes from your own fork.

That should fix all the issues with dependencies! 🍕

[github-actions[bot]]

:tada: This issue has been resolved in version 1.10.0 :tada:

The release is available on:

• GitHub release
• ghcr.io container (@latest dist-tag)

Your semantic-release bot :package::rocket: