Add GitHub Login - Githubissues

satococoa commented 1 week ago

Summary

ref https://github.com/route06inc/giselle/issues/53

This PR enables users to sign up and sign in with their GitHub accounts using Supabase Auth. https://supabase.com/docs/guides/auth/social-login/auth-github

Additionally, I have implemented the linking and unlinking of GitHub accounts to existing Giselle accounts through manual identity linking feature. https://supabase.com/docs/guides/auth/auth-identity-linking

Until this PR, we only supported email signup. This PR introduces a second signup method, so I've slightly modified the signup flow to meet these requirements.

Related Issue

https://github.com/route06inc/giselle/issues/53
https://github.com/route06inc/giselle/pull/51
- I need to resubmit PR #51 because it doesn't use Supabase Auth, as it was only a proof of concept.

Changes

This pull request introduces a comprehensive GitHub OAuth integration, including authorization, callback handling, and user management within the authentication and settings modules. The changes are grouped into three main themes: OAuth Authorization, User Management, and UI Components.

OAuth Authorization

app/(auth)/actions.ts: Added authorizeGitHub function to initiate GitHub OAuth flow and handle redirection.
app/(auth)/auth/callback/route.ts: Implemented GET route to handle OAuth callback, exchange code for session, and store provider tokens.

User Management

app/(auth)/lib/delete-oauth-credential.ts: Added function to delete OAuth credentials from the database.
app/(auth)/lib/get-auth-callback-url.ts: Added utility function to generate OAuth callback URLs.
app/(auth)/lib/get-oauth-credential.ts: Added function to retrieve OAuth credentials from the database.
app/(auth)/lib/index.ts: Exported new OAuth-related utility functions.
app/(auth)/lib/refresh-oauth-credential.ts: Added function to refresh OAuth credentials.
app/(main)/settings/account/actions.ts: Added functions to connect and disconnect GitHub identities, including handling OAuth credentials.
app/(main)/settings/account/github-authentication.tsx: Added component to manage GitHub authentication state and display user information.

UI Components

app/(auth)/components/oauth-providers.tsx: Updated OAuth providers component to support GitHub OAuth flow. [1] [2]
app/(auth)/login/page.tsx: Enabled OAuth providers in the login page. [1] [2]
app/(auth)/signup/email/page.tsx: Updated signup page to include email-specific title and action prompts. [1] [2]
app/(auth)/signup/page.tsx: Enabled OAuth providers in the signup page. [1] [2]
app/(main)/settings/account/page.tsx: Added GitHub authentication card to the account settings page. [1] [2]
app/(main)/settings/components/github-connection-button.tsx: Added buttons for connecting and disconnecting GitHub accounts.
app/(main)/settings/components/github-connection.tsx: Added component to display GitHub connection status and handle connect/disconnect actions.
components/ui/skeleton.tsx: Added a skeleton component for loading states.

Testing

Case 1

Given: You have Giselle account: foobar@route06.co.jp.

Sign up with your GitHub account using the email foobar@route06.co.jp (note that your GitHub account may have additional emails, and your primary email can be different).

👉 The GitHub identity is linked to your existing Giselle account: foobar@route06.co.jp.

Case 2

Given: You don't have a Giselle account.

Sign up with your GitHub account using the emails foobar@gmail.com and foobar@route06.co.jp. The Gmail one is primary.

👉 A new Giselle account foobar@gmail.com with the GitHub identity will be created.

Then sign up with the email foobar@route06.co.jp.

👉 Another Giselle account foobar@route06.co.jp will be created.

In this case, you cannot link your GitHub account (having foobar@gmail.com and foobar@route06.co.jp) to the Giselle account foobar@route06.co.jp unless you delete the Giselle account foobar@gmail.com.

Case3

Given: You have a Giselle account with the email foobar@route06.co.jp. (not created via GitHub signup)

You can link any GitHub account on /settings/account. (This uses Supabase's manual linking feature)

Additionally, if you also have an email identity, you can unlink your GitHub account on /settings/account.

Other Information

Preparation

[x] On GitHub: Create GitHub App for preview/development environments
- ⚠️ Callback URL should point to the URL provided by Supabase.
- ⚠️ Read-only access to email addresses should be added as permissions.
[x] On Supabase: Enable GitHub provider in Auth
[x] On Supabase: Add Redirect URLs
- For development: http://localhost:*/**, for preview: https://*-r06-edge.vercel.app/**
[x] On Supabase: Opt into the Manual Linking feature
[x] On Vercel: Add GITHUB_APP_CLIENT_ID
[x] On Vercel: Add GITHUB_APP_CLIENT_SECRET

TODO before merging this PR

[x] On GitHub: Create GitHub App for production environments
- ⚠️ Callback URL should point to the URL provided by Supabase.
- ⚠️ Read-only access to email addresses should be added as permissions.
[x] On Supabase: Enable GitHub provider in Auth
[x] On Supabase: Add Redirect URLs
- For production: https://studio.giselles.ai/**
[x] On Supabase: Opt into the Manual Linking feature
[x] On Vercel: Add GITHUB_APP_CLIENT_ID
[x] On Vercel: Add GITHUB_APP_CLIENT_SECRET

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
giselle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 6, 2024 2:06am

shige commented 1 week ago

@satococoa Thank you for the implementation!

I need to resubmit PR GitHub App integration #51 because it doesn't use Supabase Auth, as it was only a proof of concept.

First, I have one question regarding the GITHUB_APP_CLIENT_ID environment variable.

Are you planning to use the same GitHub App for GitHub Login and GitHub repository integration, or will they be separate applications?

Context:

The GitHub App for authentication should be linked to a specific GitHub user.
- Examples:
- https://github.com/satococoa
- https://github.com/shige
The GitHub App for repository integration should be linked to a GitHub organization, with read/write permissions for repositories.
- Examples:
- https://github.com/route06inc
- https://github.com/shige

Considering this, I think it might be beneficial to separate the applications and their corresponding environment variable names to avoid confusion in operations.

For example, in the following scenarios, handling could become complicated if the apps are not separate, so I believe it might be better to set them up as separate applications from the start.

Log in to the Giselle app using GitHub login
Install the GitHub App on the repository https://github.com/route06inc/giselle
If you want to unlink GitHub login, you can use Unlink an identity

satococoa commented 1 week ago

@shige I plan to use the same GitHub App for GitHub Login and GitHub repository integration.

Here is my thought...

First, Authorizing a GitHub App and Installing a GitHub App is a different matter.

You can authorize an App as a GitHub user and install the App into any GitHub account (personal account or organization). Difference between installation and authorization

If we use different GitHub Apps (a GitHub App for some GitHub automation, and a GitHub OAuth App for authentication), some use cases could become complicated.

Example use case.

You will want to get a list of repositories that can access both as a GitHub user and as a GitHub App. GET /user/installations/{installation_id}/repositories should work for this use case. This endpoint requires GitHub App user access tokens

But if we use separate GitHub App and GitHub OAuth App, this use case would require:

Getting accessible repository by GitHub User with access token created through OAuth App.
Getting accessible repository by GitHub App with GitHub App Installation.
then merge them!

For example, the AWS Amplify and Vercel use the same GitHub App for both authentication and repository management.

Therefore, I believe using the same GitHub App for both purposes will simplify the process and reduce potential complications.

shige commented 1 week ago

@satococoa Thank you for your reply!