background
Rafi
Home / Portfolio / OAuth2 and Media Handling
PORTFOLIO

OAuth2 and Media Handling

Challenge Binar Academy Kampus Merdeka Batch 3 - Chapter 7. Integration with Google and Facebook OAuth2, and media handling with Multer.

#ExpressJS  #OAuth2  #Multer  #Binar Challenge  

OAuth2 and Media Handling

Integration with Google and Facebook OAuth2, and media handling with Multer.

Binar Challenge - Backend JavaScript - Chapter 7

This project is one of Challenge from Binar Academy Kampus Merdeka.

This challenge is a continuation of the previous challenge, which is Unit Test & Integration Test.

Source code : GitHub / GitLab

Requirements

  • Google OAuth2
  • Facebook OAuth2
  • Multer
  • Authorization Roles

Features

  • User Game CRUD
  • User Game Biodata CRUD
  • User Game History CRUD
  • Authentication
  • Generate documentation from Postman collection
  • Unit Test
  • Integration Test
  • CI/CD with GitHub Actions, not working due Vercel's serverless function.
  • Google OAuth2
  • Facebook OAuth2
  • Upload media
  • Authorization

Tech Stack

Prerequisites

  • NodeJS
  • PostgreSQL
  • sequelize-cli - Sequelize command line interface, make sure you install it globally.
  • nodemon - Nodemon will watch the files in the directory in which nodemon was started, and if any files change, nodemon will automatically restart your node application. Make sure you install it globally.

Installation and Usage

Clone the repository

1git clone https://github.com/raprmdn/binar-challenge.git
bash

Cd into the project directory

1cd binar-challenge/chapter7
bash

Install dependencies

1npm install
bash

Copy .env.example to .env

1cp .env.example .env
bash

Configure the required environment variables in .env file

How to get GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, go to Google Cloud Platform and create a new project. Then, go to Google Cloud Platform Credentials and create a new OAuth client ID. Select Web application as the application type, and add http://localhost:5000/auth/google/callback as the authorized redirect URI. Copy the client ID and client secret, and paste it to the GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET environment variables in .env file.

How to get FACEBOOK_CLIENT_ID, FACEBOOK_CLIENT_SECRET, go to Facebook for Developers and create a new app. Then, go to Facebook for Developers App Dashboard and select the app that you have created. Go to Settings > Basic, and copy the App ID and App Secret, and paste it to the FACEBOOK_CLIENT_ID and FACEBOOK_CLIENT_SECRET environment variables in .env file.

.env
1# Google OAuth2 Setup
2GOOGLE_CLIENT_ID=
3GOOGLE_CLIENT_SECRET=
4GOOGLE_REDIRECT_URI=http://localhost:5000/api/auth/google/callback
5
6# Facebook OAuth2 Setup
7FACEBOOK_CLIENT_ID=
8FACEBOOK_CLIENT_SECRET=
9FACEBOOK_REDIRECT_URI=http://localhost:5000/api/auth/facebook/callback
dotenv
You can change the GOOGLE_REDIRECT_URI and FACEBOOK_REDIRECT_URI to your own.
But make sure you also change it in Google Cloud Platform and Facebook for Developer Dashboard page as well.

Create database

1sequelize db:create
bash

Run migration

1sequelize db:migrate
bash

Run seed

1sequelize db:seed:all
bash

Run the development server

1npm run dev
bash

API Documentation

Documentation for this API can be found in here.

Sign In with Google

  • Method : GET
  • Endpoint : /api/auth/google
  • Description : Sign In with Google

Callback after Sign In with Google

  • Method : GET
  • Endpoint : /api/auth/google/callback
  • Description : Callback after Sign In with Google

Sign In with Facebook

  • Method : GET
  • Endpoint : /api/auth/facebook
  • Description : Sign In with Facebook

Callback after Sign In with Facebook

  • Method : GET
  • Endpoint : /api/auth/facebook/callback
  • Description : Callback after Sign In with Facebook

Register User

  • Method : POST
  • Endpoint : /api/auth/register
  • Description : Register User
  • Request Body :
    • name: string
    • username: string
    • email: string
    • password: string
    • password_confirmation: string
    • avatar: file: png, jpeg, gif, svg, webp max: 5MB

Update User Avatar

  • Method : PUT
  • Endpoint : /api/auth/avatar
  • Description : Update User Avatar
  • Request Header :
    • Authorization: Bearer {token}
  • Request Body : Content-Type: multipart/form-data
    • avatar: file: png, jpeg, gif, svg, webp max: 5MB

Update User Character Avatar

  • Method : PUT
  • Endpoint : /api/upload/media
  • Description : Update User Character Avatar
  • Request Header :
    • Authorization: Bearer {token}
  • Request Body : Content-Type: multipart/form-data
    • avatar: file: png, jpeg, gif, svg, webp max: 5MB

Random File Upload

  • Method : POST
  • Endpoint : /api/upload/media
  • Description : Random File Upload [Admin]
  • Request Header :
    • Authorization: Bearer {token}
  • Request Body : Content-Type: multipart/form-data
    • media: file: support any file type

Change Character Nickname

  • Method : PATCH
  • Endpoint : /api/characters/:nickname/change-nickname
  • Description : Change Character Nickname [Admin]
  • Request Header :
    • Authorization: Bearer {token}
  • Request Body :
1{
2  "id": "integer",
3  "nickname": "string"
4}
json

Gain Characters Experience

  • Method : PATCH
  • Endpoint : /api/characters/:nickname/gained-exp
  • Description : Gain Characters Experience [Admin]
  • Request Header :
    • Authorization: Bearer {token}
  • Request Body :
1{
2  "id": "integer",
3  "gained_exp": "integer"
4}
json

Level Up Character

  • Method : PATCH
  • Endpoint : /api/characters/:nickname/level-up
  • Description : Level Up User Character [Admin]
  • Request Header :
    • Authorization: Bearer {token}

Delete Character

  • Method : DELETE
  • Endpoint : /api/characters/:nickname/delete-character
  • Description : Delete Character User [Admin]
  • Request Header :
    • Authorization: Bearer {token}

Next Challenge

The next challenge is implementation Nodemailer for sending email and Web Push Notification for sending notification to the user. Check it out here.