How to Authenticate a Nuxt.js App with GitHub and Appwrite

Authentication is the process of confirming the identity of the users of an application, i.e., ensuring if they are who they indeed are.

Appwrite’s documentation described Appwrite as a self-hosted backend-as-a-service platform that provides developers with all the core APIs required to build any application. Appwrite delivers solutions that help in building backend servers for applications.

This article will discuss how to authenticate a Nuxt.js application using Appwrite’s Github OAuth provider.

GitHub

Check out the complete source code here.

Prerequisites

Understanding this article requires the following:

• Installation of Node.js
• Basic knowledge of JavaScript
• Docker installation
• An Appwrite instance; check out this article on how to set up an instance
• A GitHub account (Create an account here)

Creating a Nuxt.js Project

Use npx create-nuxt-app <project-name> to create a new Nuxt.js project.
The process of scaffolding the project would provide a list of options, which should look like this:

Installing Appwrite

To use Appwrite, we will install it in our project, like so:

npm install nuxt-appwrite

Configuring nuxt.config for Appwrite

We need to configure our Nuxt.js application in the nuxt.config file before we can use Appwrite.

To do this, we will register the Appwrite for global use in the nuxt.config.js file by adding nuxt-appwrite in the modules section:

modules: [ 'nuxt-appwrite' ],

Appwrite also has a one-click to install digital ocean droplet.

Creating a New Appwrite Project

To create a new project, start up the Appwrite instance on your machine and navigate to the specified hostname and port http://localhost:80. Next, we need to log in to our account or create an account if we don’t have one.

You can learn more about setting up Appwrite here. On the console, click on the Create Project button.

Clicking on the Create Project will take us to an inner page where we can add our project name. We will add appwrite_github as the name and click Create.

The project dashboard becomes visible on the console after project creation. We can access the inner page from the Settings tab at the top of the page.

The inner page allows us to copy the Project ID and API Endpoint for use in our Nuxt.js application.

We will then proceed to create an init.js file in our Nuxt.js application’s root directory to initialize the Appwrite Web SDK by adding the code block below:

import { Appwrite } from 'appwrite';
export const sdk = new Appwrite();
sdk
  .setEndpoint('http://localhost/v1') // Replace this with your endpoint
  .setProject('***'); // Replace this with your ProjectID

Activating GitHub OAuth2 provider on Appwrite

We will navigate to the Users section on the main menu, where we can access the Settings tab and select from the list of auth providers.

From the OAuth2 providers, we will look out for the GitHub provider to update its settings.

Toggling the GitHub provider will bring to view the App ID and App Secret fields to be filled. We will fill these fields shortly, but we need to take note of the “GitHub redirect URL” provided as we need it for authentication on the GitHub dashboard.

Creating an App on GitHub

Appwrite's GitHub OAuth provider requires us to create an application on GitHub from the developer's dashboard. Check out this comprehensive documentation on creating a GitHub developer's account.

We can create a GitHub application by navigating to the Settings > Developer settings > OAuth Apps from our profile or simply by clicking here, thus leading us automatically to where we can create the application. From there, we will add the GitHub redirect URL from the Appwrite application to the Authorization callback URL in the application.

We will finish this setup by copying the Client ID and Client Secrets from the application page on GitHub. We will add these keys to the empty fields shown in our Appwrite GitHub Oauth2 settings.

Building Authentication in Nuxt.js

Our application will have two pages - the login page where authentication happens using the Appwrite GitHub provider and another where we display the user details.

Creating the login page

The login page is the application’s entry point where users get authenticated. To build this, we will update the pages/index.vue with the code below:

<template>
  <div class="bg-moon-gray vh-100 pa3 tc">
    <h2 class="black">Github authentication with Appwrite</h2>
    <div class="br3 bg-black ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l mw6 center mt5 ph4 pv4">
      <p class="f4">Click on this button to login</p>
        <button class="f6 link dim br3 pv2 ph2 mb2 dib white bg-green ba b--navy pointer mt3 mt0-l inline-flex items-center" @click="loginWithGithub">
          <span class="f6 ml2 pr2">Login with Github</span>
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init.js'
export default {
  methods: {
    loginWithGithub: async function(){
      try {
        await sdk.account.createOAuth2Session('github', 'http://localhost:3000/dashboard')
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

In the code block, we achieved the following:

• The <template> tag contains the markup for displaying the login UI
• Imported the Apprwite SDK initialized in the init.js file
• We created a loginwithGithub asynchronous function that uses the imported Appwrite SDK; within this function, we added the Appwrite createOAuth2Session method that received the following:
  • github: this is the OAuth2 provider we would like users to use to sign in
  • A redirect URL where users are directed after successful authentication

Creating the dashboard page

Next, we will create a page to which users get directed to after a successful login. This page shows the user's name and email with an additional button that allows them to log out. To implement this, we will create a pages/dashboard.vue file and add the code below:

<template>
  <div class="bg-light-gray vh-100 pa3 tc">
    <h2 class="tc">Github authentication with Appwrite</h2>
    <div class="br3 bg-black ba near-white b--black-10 shadow-3 w-100 w-60-m w-30-l center mt5 ph4 pv4 mw6">
      <div class="f4 tl">
        <p class="green fw7">Name:</p>
        <p>{{name}}</p>
        <p class="mt4 green fw7">Email:</p>
        <p>{{email}}</p>
      </div>
      <button class="f5 link dim br3 pv2 ph3 mb2 dib white bg-dark-green ba b--black pointer mt4 mt0-l inline-flex items-center" @click="logOutWithGithub">
        Log out
        </button>
    </div>
  </div>
</template>
<script>
import {sdk} from '~/init';
  export default {
    data(){
      return{
        name: '',
        email: '',
        response: ''
      }
    },
    mounted: function(){
        this.getUserSession()
    },
    methods: {
      getUserSession: async function(){
        try {
          this.response = await sdk.account.get()
          if (this.response) {
            this.name = this.response.name,
            this.email = this.response.email 
          }

        } catch (error) {
          console.log(error)
        }
      },
      logOutWithGithub: async function(){
        try {
          await sdk.account.deleteSession('current')
          this.$router.push('/') 
        } catch (error) {
          console.log(error)
        }
      }
    }
  };
</script>

We achieved the following with the snippet above:

• Added the <template> tag for displaying the user information
• Imported the Appwrite SDK initialized in the init.js file
• Updated the data property with name, email, and response to hold the user’s information
• Created a getSession function which gets executed when the application is mounted. This function fetched the logged-in user information for the current and updated the variables declared in the data property with the information
• Added the logOutWithGithub function, which is connected to Appwrite’s deleteSession method (the logOutWithGithub function logs the user out of the application and immediately routes the user to the home page)

At this stage, the application should look like the below:

Conclusion

This article explained how to add authentication to an application using Appwrite’s OAuth2 GitHub provider.

Resources

Here are some resources that might be helpful:

• Create a local Appwrite instance in 3 steps
• Appwrite account API documentation