Google OAuth Setup

Overview

We are using Google OAuth to allow user to sign in into the application, and make adjustment to the records. If you are developing or contributing to this project, kindly follow the steps to configure your local OAuth.

Pre-Requisites

You will need to register to Google Cloud, in order to create project.

https://console.cloud.google.com/

Click "Select a Project", and setup a new project.

It'll take some time to setup, so be patient.

1. Configuring OAuth Consent Screen

Head over to this link to setup: https://console.cloud.google.com/apis/credentials/consent

Fill in the form as follows:

1. User Type: External
2. App Information
   1. App Name: CariSurau-Dev
   2. User Support Email: <your email>
   3. Developer contact information: <your_email>
3. Scopes: Just Save and Continue, no change
4. Test users
   1. Click Add Users
   2. Fill in your <email>
   3. Click "Add" first time
   4. Click "Add" again for second time
   5. Click "Save and Continue"
5. Finally, click "Back to Dashboard"

2. Configuring Credentials

Head over to this link: https://console.cloud.google.com/apis/credentials

1. Click + Create Credentials, choose OAuth Client ID
2. Fill in the forms
   1. Application Type: Web Application
   2. Name: CariSurau-Dev
   3. Authorized Javascript URL: http://localhost:3000
   4. Authorized redirect URL: http://localhost:3000/api/auth/callback/google
3. Finally, click "Create"

For more info about the callback URL, we are using NextAuth Google. More info: https://next-auth.js.org/providers/google

You should see a popup with credentials. Those are important secrets and never share with anyone. Do not commit into Git as well.

With that in mind, copy it accordingly into your ENVs.

/.env

GOOGLE_CLIENT_ID=<Client ID>
GOOGLE_CLIENT_SECRET=<Client secret>

3. Final Test

To verify that everything works well, feel free to head over to the system and try to login.

Login using your account as usual.

Finally, you can now add records into the system and play around!