Auth0 Vue SPA with Social Login

A simple Single Page Application (SPA) built with Vue.js and TypeScript, demonstrating social login integration with Auth0.

Features

• User authentication with Auth0
• Social login support for multiple providers (Google, Facebook, Twitter, Microsoft, Apple)
• Protected routes for authenticated users only
• TypeScript for type safety
• Environment variable configuration for sensitive data

Prerequisites

• Node.js (version 16 or higher)
• npm (version 8 or higher)

Setup

1. Clone the Repository

   git clone <repository-url>

2. Install Dependencies

   npm install

3. Configure Environment Variables

   Copy the .env.local.example file to .env.local and update the values with your Auth0 credentials:

   cp .env.local.example .env.local

   Edit .env.local to include your Auth0 domain and client ID:

   VITE_AUTH0_DOMAIN=your-auth0-domain-here
   VITE_AUTH0_CLIENT_ID=your-auth0-client-id-here
   

   Ensure .env.local is not committed to version control (it's already in .gitignore).

4. Run the Development Server

   npm run dev

   The application will be available at http://localhost:3000 (or the next available port if 3000 is in use).

Usage

• Open your browser and navigate to http://localhost:3000.
• Click on "Log In" to authenticate using Auth0.
• You'll be redirected to the Auth0 login page where you can choose a social login provider.
• After successful login, you can access the protected /profile route to view user information.
• Click "Log Out" to end your session and return to the homepage.

Project Structure

• src/main.ts: Entry point of the application, initializes Vue and Auth0.
• src/App.vue: Main component with navigation links.
• src/views/Home.vue: Home page component.
• src/views/Profile.vue: Protected profile page displaying user information.
• src/components/LoginSelector.vue: Custom component for selecting social login providers.
• src/router/index.ts: Router configuration with route guards for authentication.

Environment Variables

Sensitive configuration values are stored in environment variables:

• VITE_AUTH0_DOMAIN: Your Auth0 domain.
• VITE_AUTH0_CLIENT_ID: Your Auth0 client ID.

These are loaded from a .env.local file, which should not be committed to version control.

Building for Production

To build the application for production:

npm run build

The output will be in the dist directory.

License

This project is licensed under the MIT License - see the LICENSE file for details (if applicable).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.