This is a Next.js project made for Cobalt's Backend Intern Role's Assessment.
This is a Web-App that utilizes Google's OAuth2 in order to retrieve user's acount details and then broadcast it to a specified Slack Channel.
This App contains the following screens:
/auth/login
/auth/callback/google
/home/
/auth/login
- A simple screen that shows a Heading of "Login" and a "Login with Google" button. Upon Clicking the "Login with Google" Button the user enters the Google OAuth2 consent flow where he may or may not give us the asked permisions to his account./auth/callback/google
- This page is the page where the Google OAuth2 redirects the user after the consent flow completes where we are returned with anauthorization code
which is then exchanged with theauth_token
and arefresh_token
. These tokens are then used to send requests to various Google API's. For better Demonstration of how the Consent flow works we have not automated the Token Exchange process and left 2 Buttons to be pressed by the user in order to demonstrate what the Current State is. (We can simply make this automated using auseEffect
React Hook)./home/
- This screen shows the "Send Message to Slack Channel" and "Logout" buttons.
- All the Backend Operations are handled in
NextJS Server Actions
which are the latest feature additions in Next 14. All the required code runs on the Shared Next Server without explicitely making API hits. - All the Error States encountered on the Server Action are systematically communicated to the client.
- All the Authentications cases handled in middleware.
e.g A user that is not logged in may be
redirected
to thelogin page
even when they attempt to access thehome
page and vice-versa. - Cookies are set to httponly and samesite paramter set to string.
To Setup the Project Locally:
- Clone the Project to your device using:
git clone https://github.com/sukumar1210/cobalt-assignment.git
- Obtain your Tokens for the Google OAuth2 and Slack and MongoDB Connection String via respective consoles following their respective Documentation:
- Add your respective Tokens and Secrets to a
.env
file. You may follow thesample.env
file for reference. - Start the Development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
This project uses next/font
to automatically optimize and load Inter, a custom Google Font.