Login-icide

This application demonstrates how Google OAuth 2.0 authentication works with Node.js.

Features

• Authentication with Google OAuth 2.0
• Display of user profile information after authentication
• Session management
• Visual explanation of the OAuth flow

Prerequisites

• Node.js and npm installed
• A Google Cloud Platform account
• A registered Google OAuth application

Setup

1. Clone this repository
2. Install dependencies:

   npm install
   

3. Create a .env file in the root directory (use .env.example as a template):

   PORT=3000
   GOOGLE_CLIENT_ID=your_google_client_id
   GOOGLE_CLIENT_SECRET=your_google_client_secret
   CALLBACK_URL=http://127.0.0.1:3000/auth/google/callback
   SESSION_SECRET=some_random_secret_key
   

Creating Google OAuth Credentials

1. Go to the Google Cloud Console
2. Create a new project (or select an existing one)
3. Navigate to "APIs & Services" > "Credentials"
4. Click "Create Credentials" > "OAuth client ID"
5. Select "Web application" as the application type
6. Add a name for your OAuth client
7. Under "Authorized JavaScript origins", add: http://127.0.0.1:3000
8. Under "Authorized redirect URIs", add: http://127.0.0.1:3000/auth/google/callback
9. Click "Create"
10. Copy the generated Client ID and Client Secret to your .env file

Running the Application

Start the development server:

npm run dev

Or for production:

npm start

Navigate to http://127.0.0.1:3000 in your browser to use the application.

Understanding the OAuth Flow

1. User Clicks "Login with Google"

   • The app redirects to /auth/google
   • Passport.js initiates the OAuth flow

2. User Is Redirected to Google's Authentication Page

   • Google asks for permission to share profile information with our app

3. Google Redirects Back with Authorization Code

   • After successful authentication, Google redirects to our callback URL with a temporary code

4. Server Exchanges Code for Access Tokens

   • Our server uses the code, client ID, and client secret to obtain access tokens from Google

5. Server Uses Tokens to Fetch User Profile

   • The access token is used to request the user's profile information from Google's API

6. User is Authenticated in Our App

   • User profile is stored in the session
   • User is redirected to the profile page

Project Structure

• index.js - Main server file with Express and Passport configuration
• views/ - EJS templates for the application UI
  • home.ejs - Home page with login button
  • profile.ejs - Profile page showing user information
• .env - Environment variables (not committed to git)
• .env.example - Example environment variables