search

farhan-helmy / carisurau

https://carisurau.com
MIT License
66 stars 37 forks source link

Google OAuth Setup (Copy Paste) #63

Closed Xavier-IV closed 12 months ago

Xavier-IV commented 1 year ago

Note: You can copy paste this inside a "wiki" (recommended) as it is a doc of its own.

Github Setting > Features > Wiki (Toggle)

Afterward, feel free to attach this new Wiki to your Readme or to my PR: https://github.com/farhan-helmy/ratemysurau/pull/62

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.

image


image

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 a. App Name: CariSurau-Dev b. User Support Email: <your email> c. Developer contact information: <your_email>
  3. Scopes: Just Save and Continue, no change
  4. Test users a. Click Add Users b. Fill in your <email> c. Click "Add" first time d. Click "Add" again for second time e. 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 a. Application Type: Web Application b. Name: CariSurau-Dev c. Authorized Javascript URL: http://localhost:3000 d. 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.

image


Login using your account as usual.

image

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

image

ps: I've omitted my profile picture from the source for this screenshot purpose, otherwise you should see your profile picture on top-right.

farhan-helmy commented 1 year ago

Awesome stuff thank you for the contribution abe Zafranudin

Xavier-IV commented 1 year ago

Awesome stuff thank you for the contribution abe Zafranudin

Nice, nampak di wiki. Ada small adjustment di listing/bullet-point.

Dia tak newline.

image

The rest lgtm, thanks!