Back

Login & Register with Google

Frontend Developer

2025 - 2026
1 / 6

Role & Responsibility

The primary purpose of LaravelLogin_register is to serve as a robust Authentication Boilerplate (or starter kit) for a modern web application.

Impact & Achievements

  • Developed key user-facing features and modular components.
  • Optimized application performance and responsiveness.
  • Collaborated in a cross-functional team using Agile methodologies.

Tech Stack

Vue.jsInertia.jsLaravel 12Tailwind CSS

1. The Purpose

Core Purpose

Instead of writing an entire login structure from scratch every time you start a new application, this repository provides:

  • A fully functional standard login and registration system.
  • Seamless Single Sign-On (SSO) integration linking a user to their Google, Facebook, and Apple accounts.
  • A dashboard and user profile management page where users can update their details and passwords securely.

🛠 2. Programs and Technologies Used

VILT Stack

This project is built using the VILT Stack (Vue, Inertia, Laravel, Tailwind), a modern and highly popular tech stack combo:

  • Backend / Core Engine: Laravel 12 (PHP 8.2+). Laravel handles all business logic, database queries, routing, middleware security, and session management.
  • Frontend UI: Vue.js 3 (JavaScript). Vue handles all the interactive visual elements (components, pages, forms).
  • The Bridge: Inertia.js. Inertia acts as the 'glue' between Laravel and Vue. It allows you to build a Single-Page Application (SPA) without needing to configure complex, separate REST APIs.
  • Styling: Tailwind CSS 4.0. A utility-first CSS framework used to design the user interface without writing custom CSS files.
  • Authentication Package: Laravel Socialite. Makes social OAuth integrations (Google, Facebook, Apple) incredibly simple and secure.
  • Bundler: Vite. Responsible for compiling and hot-reloading your Vue components and Tailwind styles during development.

🔄 3. Application Workflow

Guest Access & Authentication

A. Guest Access & Authentication. When a guest visits the root URL (/), they are automatically redirected to Login.vue.

  • Choice of Login (Standard): A user submits their email and password. The LoginController validates it and creates a session.
  • Social Login: A user clicks 'Sign in with Google'. The GoogleController calls Socialite to redirect the user to Google's permission screen.
  • Callback: The app reads the user's Google ID. If it's a new user, it saves their info and logs them in automatically.

Authenticated State

B. Authenticated State

  • Dashboard: User is redirected to /dashboard. Protected by auth middleware, only logged-in users can reach it.
  • Profile Management: Navigate to /profile to update standard info (fullname, username) and change password securely.
  • Logout: Triggers a POST request to /logout, destroying the secure session and sending user back to login page.