Number Multiplier App with Google Authentication

A simple React TypeScript application that allows users to multiply two numbers using dropdown selections. The app now includes Google OAuth authentication via Auth0.

Features

• Google Authentication - Secure login with Google OAuth via Auth0
• Two dropdown boxes for selecting numbers 0-9
• A multiply button to perform the calculation
• A result display showing the multiplication result
• User profile display with avatar and name
• Clean, modern, and responsive UI design
• Built with React + TypeScript + Vite + Auth0

Getting Started

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn
• Auth0 account (free tier available)
• Google OAuth setup in Auth0

Auth0 Setup

1. Create an Auth0 Account

   • Go to auth0.com and sign up for a free account

2. Create a New Application

   • In the Auth0 Dashboard, go to Applications
   • Click "Create Application"
   • Choose "Single Page Web Applications"
   • Select "React" as the technology

3. Configure Application Settings

   • Set Allowed Callback URLs to: http://localhost:5173, http://localhost:5174
   • Set Allowed Logout URLs to: http://localhost:5173, http://localhost:5174
   • Set Allowed Web Origins to: http://localhost:5173, http://localhost:5174

4. Enable Google Connection

   • Go to Authentication > Social
   • Enable Google and configure with your Google OAuth credentials

5. Get Your Credentials

   • Copy your Domain and Client ID from the Application settings

Installation

1. Clone the repository or navigate to the project directory

2. Install dependencies:

   npm install

3. Setup Environment Variables

   Copy the example environment file:

   cp .env.example .env

   Edit .env and add your Auth0 credentials:

   VITE_AUTH0_DOMAIN=your-auth0-domain.auth0.com
   VITE_AUTH0_CLIENT_ID=your-auth0-client-id

Running the Application

1. Start the development server:

   npm run dev

2. Open your browser and navigate to http://localhost:5173

Building for Production

npm run build

Preview Production Build

npm run preview

Project Structure

• src/App.tsx - Main application component with authentication and calculator logic
• src/App.css - Styling for the application including auth components
• src/main.tsx - Application entry point with AuthProvider setup
• src/components/AuthButton.tsx - Login/logout button component
• src/components/Profile.tsx - User profile display component
• src/auth/ - Abstracted authentication system
  • index.tsx - Main AuthProvider with provider switching
  • config.ts - Authentication configuration and provider selection
  • types.ts - TypeScript interfaces for authentication
  • providers/Auth0Provider.tsx - Auth0 implementation
  • providers/KeycloakProvider.tsx - Keycloak placeholder
  • providers/MockProvider.tsx - Mock provider for testing
• .env - Environment variables for Auth0 configuration
• .env.example - Template for environment variables

Authentication Architecture

The app uses an abstracted authentication system that allows easy switching between different providers:

Switching Providers

To switch from Auth0 to Keycloak (or add other providers), simply change one line in src/auth/config.ts:

// Current: Auth0
export const AUTH_PROVIDER: AuthProviderType = 'auth0'

// Future: Keycloak
export const AUTH_PROVIDER: AuthProviderType = 'keycloak'

// Testing: Mock provider
export const AUTH_PROVIDER: AuthProviderType = 'mock'

Benefits

• Provider Independence - Switch auth systems without changing app code
• Consistent Interface - All providers implement the same API
• Type Safety - Full TypeScript support
• Easy Testing - Built-in mock provider
• Future Proof - Add new providers easily

Security Features

• Secure Authentication - OAuth 2.0 flow with Google
• Token Management - Automatic token refresh and secure storage
• Protected Routes - Calculator only accessible to authenticated users
• User Sessions - Persistent login state across browser sessions

Technologies Used

• React - UI library
• TypeScript - Type safety
• Vite - Build tool and development server
• Auth0 - Authentication and user management
• CSS3 - Modern styling with flexbox and responsive design

Usage

1. Sign In

   • Click "Log In with Google" button
   • Authenticate with your Google account via Auth0

2. Use the Calculator

   • Select a number from the first dropdown (0-9)
   • Select a number from the second dropdown (0-9)
   • Click the "Multiply" button
   • The result will be displayed in the result text box

3. User Profile

   • Your profile picture and name will be displayed
   • Click "Log Out" to end your session

Development Notes

• The app uses environment variables for Auth0 configuration
• Make sure to set up your Auth0 application with the correct callback URLs
• For production deployment, update the callback URLs in Auth0 settings
• The authentication state is managed by the Auth0 React SDK