GitHub Authentication - Githubissues

exonomyapp commented 3 months ago

Parents: #4

To add GitHub authentication to https://exosystems.net using Shadcn for UI management, we set up the bare minimum code:

1. Install Necessary Dependencies

First, install the necessary packages. This includes @nuxt/auth-next for authentication and @nuxtjs/axios for making HTTP requests.

npm install @nuxtjs/auth-next @nuxtjs/axios

2. Configure Modules in `nuxt.config.js`

Next, configure the @nuxtjs/auth-next and @nuxtjs/axios modules in your nuxt.config.js.

export default {
  // Add axios module
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],

  axios: {
    // Can be used to override global axios options
  },

  auth: {
    strategies: {
      github: {
        clientId: process.env.GITHUB_CLIENT_ID,
        clientSecret: process.env.GITHUB_CLIENT_SECRET,
        scope: ['user']
      }
    }
  },

  // Environment variables
  env: {
    GITHUB_CLIENT_ID: process.env.GITHUB_CLIENT_ID,
    GITHUB_CLIENT_SECRET: process.env.GITHUB_CLIENT_SECRET
  }
}

3. Create Authentication UI Components Using Shadcn

Use Shadcn to create a simple button for GitHub login.

<template>
  <div>
    <button class="bg-black text-white px-4 py-2 rounded" @click="loginWithGithub">
      Login with GitHub
    </button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGithub() {
      this.$auth.loginWith('github');
    }
  }
}
</script>

4. Handle Authentication in Pages

You can now add authentication checks in your pages. For example, in a pages/index.vue:

<template>
  <div>
    <h1 v-if="$auth.loggedIn">Welcome, {{ $auth.user.name }}</h1>
    <h1 v-else>Please log in</h1>
    <button v-if="!$auth.loggedIn" @click="loginWithGithub">Login with GitHub</button>
    <button v-if="$auth.loggedIn" @click="logout">Logout</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGithub() {
      this.$auth.loginWith('github');
    },
    logout() {
      this.$auth.logout();
    }
  }
}
</script>

5. Set Up GitHub OAuth Application

Ensure that you've created a GitHub OAuth application and added your GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET to your environment variables.

You can do this in a .env file at the root of your project:

GITHUB_CLIENT_ID=your_github_client_id
GITHUB_CLIENT_SECRET=your_github_client_secret

6. Deploy and Test

Deploy your application and test the GitHub authentication. When a user clicks the "Login with GitHub" button, they should be redirected to GitHub's OAuth flow. Upon successful login, they will be redirected back to your app, where their session will be established.

This is the bare minimum setup required to implement GitHub authentication in a Nuxt.js app using Shadcn for UI management.

exonomyapp commented 2 months ago