/laravel-angular-authentication

Laravel and Angular with JWT authentication series with Reset password system

Primary LanguagePHP


Larangular Project


About

This is a project for testing and learning Laravel+angular.

Features:

  • Backend made on Laravel
  • Frontend made on Angular
  • Single Page load
  • MVC model
  • Core->clients architecture.
  • JWT authentication for the REST API
  • Email based notification system for password reset
  • Based on Udemy course for JWT authentication Github - Udemy Course

    Created by: Daniel A Montoya

    Github: Laravel+angular

    Web: www.montolla.tk

    Users module

    The users module has a complete CRUD so you can create (singup), read (login), update (edit) and delete (remove) the users from the Frontend

    At the backend, you have the necessary API calls for the CRUD and also the JWT token handle embedded.

    Some API calls to the backend needs authorization using JWT token (bearer)

    REST Api

    JWT (Json Web Token)

    Encoded

    Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xMjcuMC4wLjE6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTYyOTMwMzI4NSwiZXhwIjoxNjI5MzA2ODg1LCJuYmYiOjE2MjkzMDMyODUsImp0aSI6IkZkZVVEU1E4OFQ4ZmNBaTEiLCJzdWIiOjEsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ._lQmy6fRkUeVUD6nA2Kuf_rk_dmo1WLd1XkwdiooksI

    Decoded with https://jwt.io

    Header: ALGORITHM & TOKEN TYPE

    {
    "typ": "JWT",
    "alg": "HS256"
    }
    

    PAYLOAD: DATA

    {
    "iss": "http://127.0.0.1:8000/api/login",
    "iat": 1629303285,
    "exp": 1629306885,
    "nbf": 1629303285,
    "jti": "FdeUDSQ88T8fcAi1",
    "sub": 1,
    "prv": "23bd5c8949f600adb39e701c400872db7a5976f7"
    }
    

    VERIFY SIGNATURE

    HMACSHA256(
    base64UrlEncode(header) + "." +
    base64UrlEncode(payload),
    
    your-256-bit-secret
    
    ) secret base64 encoded
    

    SignUp

    POST /api/signup
    Host: 127.0.0.1:8000
    Content-Type: application/json
    Accept: application/json
    Authorization: Bearer 
    Body:
    {
        "name":"Pepe",
        "phone":"123",
        "movil":"897",
        "type":"Employee",
        "email":"pepe@montolla.tk",
        "password":"pepe",
        "password_confirmation":"pepe"
    

    } Response: { "access_token": "", "token_type": "bearer", "expires_in": 3600, "user": "Pepe" }

    Login

    POST /api/login
    Host: 127.0.0.1:8000
    Content-Type: application/json
    accept: application/json
    body: 
    {
        "email":"montolla@montolla.tk",
        "password":"montolla"
    }
    Response:
    {
        "access_token": "",
        "token_type": "bearer",
        "expires_in": 3600,
        "user": "montolla"
    }
    

    Logout

    POST /api/logout
    Host: 127.0.0.1:8000
    Content-Type: application/json
    Accept: application/json
    Authorization: Bearer 
    Body:
    Response:
    {
        "message": "Successfully logged out"
    }
    

    CurrentUser

    POST /api/me
    Host: 127.0.0.1:8000
    Content-Type: application/json
    Accept: application/json
    Authorization: Bearer 
    Body:
    Response:
    {
        "id": 2,
        "name": "Pepe",
        "email": "pepe@montolla.tk",
        "email_verified_at": null,
        "created_at": "2021-08-18T15:27:35.000000Z",
        "updated_at": "2021-08-18T15:27:35.000000Z",
        "phone": "123",
        "movil": "897",
        "type": "Employee",
        "photo": null
    }
    

    RetrieveCategories

    POST /api/retrieveCategories
    Host: 127.0.0.1:8000
    Content-Type: application/json
    Accept: application/json
    Authorization: Bearer 
    Body:
    Response:
    [
        {
            "id": 1,
            "name": "asdf2",
            "description": "11112",
            "created_at": "2021-08-18T13:29:12.000000Z",
            "updated_at": "2021-08-18T13:29:18.000000Z"
        }
    ]
    

    Password Reset

    In order to use rest password functionality, you need to set the email server first with this settings:
    /**
    * Use this service to test http://mailtrap.io/.....
    * Over .env set this settings
    * MAIL_HOST=smtp.mailtrap.io
    * MAIL_USERNAME=357f3605c3eed9
    * MAIL_PASSWORD=a424605aaff236
    * MAIL_ENCRYPTION=tls
    * MAIL_FROM_ADDRESS="sysadmin@Laravel_plus_angular.io"
    */
    

    Server

    It was design on such was that the backend is located at http://127.0.0.1:8000 and the frontend at http://localhost:4200/ but this last one it is optional.

    Also, that the backend server has CORS properly setup so the frontend can call it for API consume...

    Core first setup

    composer install
    composer update
    

    php artisan key:generate php artisan jwt:secret php artisan cache:clear php artisan config:clear

    php artisan migrate php artisan db:seed

    php artisan serve

    Client first setup

    npm install -g @angular/cli
    npm install
    

    ng update ng serve


    Frontend

    This project was generated with Angular CLI version 11.1.1.

    Development server

    Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

    Code scaffolding

    Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

    Build

    Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

    Running unit tests

    Run ng test to execute the unit tests via Karma.

    Running end-to-end tests

    Run ng e2e to execute the end-to-end tests via Protractor.

    Further help

    To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.


    backend


    Build Status Total Downloads Latest Stable Version License

    Contributing

    Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the Laravel documentation.

    Code of Conduct

    In order to ensure that the Laravel community is welcoming to all, please review and abide by the Code of Conduct.

    Security Vulnerabilities

    If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via taylor@laravel.com. All security vulnerabilities will be promptly addressed.

    License

    The Laravel framework is open-sourced software licensed under the MIT license.