# Laravel 10 Custom Registration and Login This repository provides an example of a custom registration and login system implemented in Laravel 10. ## Getting Started ### 1. Create a new project ``` composer create-project laravel/laravel custom-login ``` ### 2. Set up your database credentials Update the .env file in your project root with your database details: ``` DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=your_database_name DB_USERNAME=your_username DB_PASSWORD=your_password ``` ### 3. Install Yoeunes toastr package ``` composer require yoeunes/toastr ``` ### 4. Migrate your database tables ``` php artisan migrate ``` ### 5. Create an Auth Controller ``` php artisan make:controller AuthController ``` app/Http/Controllers/AuthController.php ``` validate($request, [ 'email' => 'required|email', 'password' => 'required|min:8', ]); $credentials = $request->only('email', 'password'); if (Auth::attempt($credentials)) { return redirect('/'); } toastr()->error('Invalid email or password'); return redirect('login'); } public function register(Request $request) { $this->validate($request, [ 'name' => 'required', 'email' => 'required|email|unique:users', 'password' => 'required|min:8', ]); $user = new User(); $user->name = $request->name; $user->email = $request->email; $user->password = \Hash::make($request->password); $user->save(); Auth::login($user); toastr()->success('Registration successful!'); return redirect('/'); } public function logout() { Auth::logout(); toastr()->success('Logout successful!'); return redirect('login'); } } ``` ### 6. Create a Welcome Controller ``` php artisan make:controller WelcomeController ``` app/Http/Controllers/WelcomeController.php ``` group(function () { Route::get('login', [AuthController::class, 'loginIndex']); Route::get('register', [AuthController::class, 'registerIndex']); Route::post('login', [AuthController::class, 'login']); Route::post('register', [AuthController::class, 'register']); }); Route::middleware('auth')->group(function () { Route::get('/', [WelcomeController::class, 'index']); Route::get('logout', [AuthController::class, 'logout']); }); ``` ### 8. Modify Auth Middleware app/Middleware/Authenticate.php ``` expectsJson() ? null : url('login'); } } ``` ### 9. Modify Guest Middleware app/Middleware/RedirectIfAuthenticated.php ``` check()) { return redirect('/'); } } return $next($request); } } ``` ### 10. Create Resources resources/views/layouts/app.blade.php ``` @yield('title') | {{env('APP_NAME')}} @yield('content') ``` resources/views/login.blade.php ``` @extends('layouts.app') @section('title', 'Login') @section('content')

Welcome Back

@csrf

Email Address @error('email'){{$message}}@enderror

Password @error('password'){{$message}}@enderror

Login

I dont't have an account? Register

@endsection ``` resources/views/register.blade.php ``` @extends('layouts.app') @section('title', 'Register') @section('content')

Create new account

@csrf

Name @error('name'){{$message}}@enderror

Email Address @error('email'){{$message}}@enderror

Password @error('password'){{$message}}@enderror

Register

Already have an account? Login

@endsection ``` resources/views/welcome.blade.php ``` @extends('layouts.app') @section('title', 'Welcome') @section('content')

{{auth()->user()->name}}

{{auth()->user()->email}}

Logout

@endsection ``` ### 11. Adding Custom CSS (Optional) public/css/main.css ``` @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); /*-------------------------------------------------------------- # General --------------------------------------------------------------*/ :root { scroll-behavior: smooth; } body { font-family: "Roboto", sans-serif; } a { cursor: pointer; text-decoration: none; } a:hover, a:focus { text-decoration: none; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; } textarea { resize: none; } hr { margin: 10px 0px; color: darkgray; } ::-moz-selection { color: #ffffff; background: var(--bs-primary); } ::selection { color: #ffffff; background: var(--bs-primary); } ::-webkit-scrollbar { width: 5px; height: 8px; background-color: #fff; } ::-webkit-scrollbar-thumb { background-color: #aab7cf; } /*-------------------------------------------------------------- # Override some default Bootstrap stylings --------------------------------------------------------------*/ *:focus { box-shadow: none !important; outline: 0px !important; } .form-control, .form-select { border-radius: 4px; border: 1px solid #ced4da; } .form-control:focus, .form-select:focus { background-color: #fdfdfd; border: 1.5px solid var(--bs-primary); outline: 0; box-shadow: 0 0 0.25rem 0.05rem rgba(105, 108, 255, 0.1); } ``` resources/views/layouts/app.blade.php > Add the below line inside your head tag ``` ``` ### 12. Run your project ``` php artisan serve ``` ## Screenshot

# fieldOps-laravel-mapbox-gl-js