GitHub OAuth Authentication

What is GitHub OAuth?

GitHub OAuth (Open Authorization) is a secure and widely-used authentication protocol that allows users to log in to your application using their GitHub credentials. By integrating GitHub OAuth, you provide users with a seamless and trusted login experience without requiring them to create a new account.

Enabling GitHub OAuth Authentication in Full-Stack-Kit

To allow users to authenticate to the app using GitHub OAuth, follow these steps in Full-Stack-Kit:

1. Open the /app/app.config.ts file.

2. Enable the auth.providers.github provider and provide the required configuration:

   auth: {
     providers: {
       github: {
         enabled: true,
         clientId: process.env.GITHUB_CLIENT_ID,
         clientSecret: process.env.GITHUB_CLIENT_SECRET,
       },
     },
     // ... other configuration options
   },

As you can see, we will need to provide the GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET environment variables to enable GitHub OAuth authentication.

Obtaining GitHub OAuth Credentials

Follow these steps to create a GitHub OAuth application and obtain the required credentials:

Go to your Github account.

1. In the upper-right corner of any page, click your profile photo, then click Settings.
2. In the left sidebar, click Developer settings.
3. In the left sidebar, click OAuth apps.
4. Click New OAuth App.

6. In Application name, type the name of your app.

7. In Homepage URL, type the full URL to your app's website.

8. Optionally, in Application description, type a description of your app that users will see.

9. In Authorization callback URL, type the callback URL http://localhost:3000/api/auth/callback/github for local development. Replace http://localhost:3000 with your production URL when deploying the app.

10. Click Register Application to generate the OAuth client ID and client secret.

Copy the generated values and replace the placeholders in the .env.local file:

# Github OAuth
GITHUB_CLIENT_ID=your-client-id
GITHUB_CLIENT_SECRET=your-client-secret

Testing GitHub OAuth Authentication

To test GitHub OAuth authentication in Full-Stack-Kit, follow these steps:

1. Start the app by running npm run dev or yarn dev in the terminal.
2. Open the app in your browser and click on the "Signin" button.
3. Select Signin with GitHub as the authentication provider.
4. You will be redirected to the GitHub login page. Enter your GitHub credentials and authorize the app.
5. After successful authentication, you will be redirected back to the app and logged in.

In this guide, you learned how to enable GitHub OAuth authentication in Full-Stack-Kit. By integrating GitHub OAuth, you provide users with a seamless and trusted login experience without requiring them to create a new account. This feature enhances the user experience and allows users to log in to your app using their existing GitHub credentials.