How to implement OAuth2 in web apps in 5 easy steps: A beginner’s guide
Tags: beginners, javascript, tutorial, nextjs
Published: 2023-07-28 08:24:53

Authentication is the foundation of security for all modern technology. Every business, enterprise, and organization requires authentication, lowering the danger of compromising important user information.

Authentication is simply validating a user's information or identity. It plays a critical role in protecting sensitive data, maintaining user privacy, and granting users appropriate access to resources and functionalities within an application.

This guide demonstrates beginner-friendly steps to implement authentication in web apps with Appwrite’s Google OAuth.

The complete source code for this project is located [here](https://github.com/ugwutotheeshoes/appwrite-google-auth). Clone and fork it to get started.


### Prerequisite

To follow along with this tutorial, the following are required:

- A basic understanding of JavaScript and [Next.js](https://nextjs.org/?utm_source=hackmamba&utm_medium=hackmamba-blog)
- Node and its package manager, `npm`. Install them from [here](https://nodejs.org/en/?utm_source=hackmamba&utm_medium=hackmamba-blog)
- Access to an Appwrite Cloud account. Submit a request for Appwrite Cloud [here](https://appwrite.io/cloud?utm_source=hackmamba&utm_medium=hackmamba-blog)
- A Google account; create a free account [here](https://accounts.google.com/signup/v2/createaccount?utm_source=hackmamba&utm_medium=hackmamba-blog)

## Step 1: Project setup and installation

Let’s bootstrap a new Next.js project with the following command:
```js
npx create-next-app <project-name>
```
The command above triggers a command-line interface (CLI) where we can create our Next.js application. The image below shows the configuration options the CLI provides:


![command-line interface](https://paper-attachments.dropboxusercontent.com/s_50D3638E1255964D59378DD072A77D7370181545B8E18D71709A5A1E41F0B344_1676357334328_ProductContext.js+-+furniture-store+-+Visual+Studio+Code+14_02_2023+07_24_42.png)


Navigate to the project directory and start a development server at [https://localhost:3000/](https://localhost:3000/) in our browser.

```js
cd <project-name> 
npm run dev
```

> **NOTE:** `<project-name>` above stands for the name of our app; we can call it any name we deem fit.


## Step 2: Set up Google authentication

We'll head to [Google Cloud Console](https://console.cloud.google.com/) to set up a Google authentication. Here, we’ll get an OAuth client ID for our application.

A client ID is an application-specific identifier that aids the client and server [OAuth 2.0 authentication](https://oauth.net/2/?utm_source=hackmamba&utm_medium=hackmamba-blog). Create a new project and name it **appwrite-google-auth**. 


![New project](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686912468077_New-Project--Google-Cloud-console+1.png)


After creating the project, click the **APIs & Services** tab to see the dashboard below. 


![APIs & Services Dashboard](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1687121145758_APIs-Services--APIs-Services--appwrite-google-auth--Google-Cloud-console.png)


On the left-hand menu, select the **OAuth Consent Screen** option. We must first configure our consent screen to create an OAuth client ID. A consent screen shows a summary of our project and its policies whenever our app requests authorizations from a user’s Google Account. 

Click on **Configure Consent Screen**, then select **External** to give access to any test user with a Google Account, and click **Create**. 


![Select user type](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686956987862_APIs-Services--appwrit-google-auth--Google-Cloud-console.png)


Next, we’ll edit our app registration. Fill in the app registration form with the details below and click **SAVE AND CONTINUE**.

|                                   |                                                           |
| --------------------------------- | --------------------------------------------------------- |
| **App Name**                          | Medic Care                                                |
| **User support email**                | walterobrian@gmail.com                                    |
| **App logo**                          | LEAVE BLANK                                               |
| **Application home page**             | http://localhost:3000/                                    |
| **Application privacy policy link**   | LEAVE BLANK                                               |
| **Application terms of service link** | LEAVE BLANK                                               |
| **Authorized domains**                | LEAVE BLANK OR ADD A REGISTERED APP DOMAIN IF THERE’S ONE    |
| **Developer contact information**     | walterobrian@gmail.com                                    |

![Edit app registration](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686957129867_Edit-app-registration--APIs-Services--appwrit-google-auth--Google-Cloud-console.png)


Leave the **Scopes** and **Test users** configurations blank and click **SAVE AND CONTINUE** to complete the process.
On the left-hand menu, select the **Credentials** option to access the page where we can generate the Google client ID. At the top of this screen, click **CREATE CREDENTIALS**, then select the **OAuth client ID** option.


![Create Credential](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686914331958_Credentials--APIs-Services--appwrit-google-auth--Google-Cloud-console+1.png)


Fill in the OAuth client ID form with the details below and click the **Create** button.

|                               |                                                |
| ----------------------------- | ---------------------------------------------- |
| **Application type**              | Web application                                |
| **Name**                          | appwrite-auth                                  |
| **Authorized JavaScript origins** | - http://localhost:3000/<br>- http://localhost |
| **Authorized redirect URIs**      | - http://localhost:3000/<br>- http://localhost |

The **Authorized JavaScript origins URI** is the development server of our application. Use http://localhost:3000 and http://localhost, or a hosted URI if the application is hosted.

The **Authorized redirect URI** is the link to which Google will redirect a user after a successful login. We can redirect a user to another link or return the user to the original link. Either way, include the URL here.

Finally, click the **Create** button to generate the **Google client ID**. We'll be redirected to the dashboard to see the newly created credentials. Copy the **Google Client ID** and **Client Secret**; we'll use them later.

![OAuth client ID form](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686959434565_Create-OAuth-client-ID--APIs-Services--appwrit-google-auth--Google-Cloud-console.png)
![Google Client ID and  Client Secret](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686960943951_Credentials--APIs-Services--appwrit-google-auth--Google-Cloud-console+2.png)

> **NOTE**: Don’t share your **Google Client ID** or **Client Secret**.

## Step 3: Create an Appwrite project

#### What is Appwrite?
[Appwrite](https://appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) is a development platform that provides a powerful API and management console for building backend servers for web and mobile applications.

To use Appwrite in our Next.js application, install Appwrite’s client-side SDK (Software Development Kit) and [Pink Design](https://pink.appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) to style web applications.
```js
npm install appwrite
npm install @appwrite.io/pink
```
Log in to [Appwrite Cloud](https://cloud.appwrite.io/?utm_source=hackmamba&utm_medium=hackmamba-blog) and create a new project.


![Create a new project](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686822493656_Organizations-Appwrite+3.png)


The new project will appear on the console. Next, copy the **Project ID** and **API Endpoint**. We’ll use this to set up our Next.js application.


> **NOTE:** Don’t share your **Project ID** or **API Endpoint**.

Navigate to the **Auth** option and click the **Settings** tab. We want to enable a Google OAuth provider for our app. Click on the **Google OAuth Provider** tab and paste the Google Client ID and Client Secret we got from Google earlier. 

Copy the Appwrite **Authorized redirect URI** for our Google OAuth provider and add it to our Google Cloud Console's list of Authorized redirect URIs.

![Google OAuth Provider tab](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686958647436_Auth-Appwrite+2.png)
![Google Cloud Console](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1686961777809_Client-ID-for-Web-application--APIs-Services--appwrit-google-auth--Google-Cloud-console.png)

## Step 4: Integrate Appwrite with our Next.js application

Let’s create a `pages/component/ApiHelper.js` file to house our Appwrite instance. Paste the **Project ID** and **API Endpoint** from Appwrite. This creates an instance to interact with Appwrite services.

```js
import { Client, Account } from "appwrite";
const client = new Client();
 export const account = new Account(client);
 client
   .setEndpoint("http://localhost/v1") // Your API Endpoint
   .setProject("OUR_PROJECT_ID"); // Your project ID
```
Next, we want to create an impression where any user not logged into the app would automatically be redirected to Google's OAuth Page. 

To achieve this functionality, open the `pages/index.js` file, import the Appwrite instance from `ApiHelper.js,` and replace its default syntax with the code snippet below.

```js
// pages/index.jsx
import React, { useEffect, useState } from "react";
import { account } from "./api/ApiHelper";
export default function Home() {
  const [userDetails, setUserDetails] = useState();
  const fetchUser = async () => {
    try {
      const data = await account.get();
      setUserDetails(data);
    } catch (error) {
      console.log("the error that happened:", error);
      return Login();
    }
  };
  useEffect(() => {
    fetchUser();
  }, []);
  const Login = () => {
    try {
      const response = account.createOAuth2Session(
        "google",
        "http://localhost:3000",
        "http://localhost:3000/login"
      );
      console.log(response);
    } catch (error) {
      console.error("Failed to create OAuth session:", error);
    }
  };
  return (
    <main>
      {userDetails ? (
          <div className="container u-padding-64 u-text-center">
            <p className="text u-normal">
              <b>Patient Name</b>: {userDetails.name}
            </p>
            <p className="text u-normal">
              <b>Email</b>: {userDetails.email}
            </p>
          </div>
        </div>
      ) : (
        <div className="container u-padding-64 u-text-center">
          <h1>Redirecting to authentication page...</h1>
        </div>
      )}
    </main>
  );
 }
```
The code snippet above does the following:

- Creates a `useState()` variable — `userDetails`, to hold user data
- Executes the function —  `fetchUser`, whenever the component is mounted. This function gets the data of a user that’s currently logged in, then assigns it to the `userDetails` variable
- Automatically creates a Google OAuth session only if the user data isn’t present, which shows the current user isn’t logged in. This Google OAuth session grants a user access to log into the app
- The Google OAuth session re-routes to the homepage only if the user successfully logs in

This is how the login page will look after applying the configurations above:


![](https://paper-attachments.dropboxusercontent.com/s_ED78FC72F2F6A1154D60012CD7F3E362E17CCBF5C4C0FDF5723FC7C5CA4BB0D4_1687036464547_localhost-3000+13.png)


## Step 5: Create a log in and log out feature

Next, we’ll create a `pages/login.js` file to log into the app manually. This file will create a Google OAuth session allowing users access to the app. Import the Appwrite instance from `ApiHelper.js` to initialize the session.

```js
//pages/login.js
import React from "react";
import Link from "next/link";
import "@appwrite.io/pink";
import { account } from "./component/ApiHelper";
export default function Login() {
  const Login = () => {
    try {
      const response = account.createOAuth2Session(
        "google",
        "http://localhost:3000",
        "http://localhost:3000/login"
      );
      console.log(response);
    } catch (error) {
      console.error("Failed to create OAuth session:", error);
    }
  };
  return (
    <main>
      <nav className="u-flex u-cross-center u-main-space-between u-padding-32">
        <h2 className="logo u-padding-16 eyebrow-heading-1 u-or-text-pink">
          <Link href="/">MEDIC CARE</Link>
        </h2>
        <button className="button" onClick={() => Login()}>
          LOG IN
        </button>
      </nav>
      <div className="container u-padding-64">
        <p className="u-text-center u-padding-64 text u-normal">
          Log in to get user details.
        </p>
      </div>
    </main>
  );
}
```
The Google OAuth session redirects to the homepage only if the user successfully logs in. To log out a user, head back to the `pages/index.js` file and add an Appwrite instance to delete the current user session and re-route the page to the login page.

```js
//pages/index.js
export default function Home() {
  const Logout = async () => {
    try {
      await account.deleteSession("current");
      router.push("/login");
    } catch (error) {
      console.log("the error that happened:", error);
    }
  };
return (    
    <main>
      {userDetails ? (
        <div>
          <nav className="u-flex u-cross-center u-main-space-between u-padding-32">
<h2 className="logo u-padding-16 eyebrow-heading-1 u-color-text-pink">MEDIC CARE</h2>
            <div>
   <button className="button" onClick={() => Logout()}> LOG OUT </button>
            </div>
          </nav>
       // User details
      ) : (
        <div className="container u-padding-64 u-text-center">
          <h1>Redirecting to authentication page...</h1>
        </div>
      )}
    </main>
    );
  }
```
Here’s a demo of how the Google authentication will turn out after applying the necessary configurations:


{% embed https://www.loom.com/share/e282945d9429478ca9245e907b4d28cb?sid=22171808-1219-4826-b9a5-9a36c7a8a386 %}

## Conclusion

Following these five steps, developers can implement OAuth2 in their web apps using Google OAuth and Appwrite SDK, providing users with a safe and efficient authentication process.

## Resources
- [Appwrite Web SDK Documentation](https://appwrite.io/docs/getting-started-for-web)
- [Appwrite Authentication Documentation](https://appwrite.io/docs/authentication)
- [Google Cloud Console](https://console.cloud.google.com/)