Laravel and Angular Authentication with JWT

Before start this   Angular laravel  authentication project  let us give you some  information about project  in this  blog we are going to learn   angular  as a frontend working and  laravel as a   backend   and developers  who are going to read this just have a little knowledge of larvel and javascipt components    At the end of   Blog  there is a link where you can get the complete project repository  on  Github 
Laravel+Angular step by step instructions

///////////////// 1st ///////////////////////// 

First install node.js and @angular/cli/9 

Create a new folder in htdocs => Larave+Angular inside that folder 

create new angular project i.e ng new frontend 

create new laravel project i.e composer ... backend 

LIKE    Larave+Angular 

                ->frontend 

                ->backend 

 After installation of  Laravel project 5.7 and  Angular  9.
 we are ready for
 ///////////////// 2nd step  /////////////////////////

Installation of JWT 

install JWT- auth  in backend by terminal  OR   inSide  composer.json

import bootstrap in frontend( styles.css )  

run  frontend project and check this out on localhost:4200   on  any Browser

Goto App-> app.component.html clean this file 

create a new component 
Open command prompt  goto your frontend folder 

      C:\xampp\htdocs\Laravel+Angular\frontend  
  " ng generate component  components/navbar   OR    ng g c  components/navbar  " 

After this  cmd we have navbar component

type selector <app-navbar></app-navbar>  in  app.component.html

Goto getbootstrap.com ->components->navbar   copy html and paste it inTo navbar.comp.html
        https://getbootstrap.com/docs/4.5/components/navbar/

Let's create other components  ! what we neend ..

same as we created the   navbar component

" ng generate component  components/navbar   " 
but this time  we change the names   
" ng generate component  components/login "

     ->login

     ->signup

     ->profile

     ->password/request-reset

     ->password/response-reset            same as created navbar component
Now we have  generated all the components

///////////////// 3rd  /////////////////////////

JWT Configuration 

Inside  Laravel backend composer.json we requires   "tymon/jwt-auth:"

Go to laravel jwt-auth-readheadocs.io
https://jwt-auth.readthedocs.io/en/develop/laravel-installation/

   Start with 1st step Home ->  laravel  installation 

Run the command publish the config

After that we will have jwt.php  file   Inside the backend -> config  folder

At the last RUN  the command  Generate secret key of JWT in .env file 

       >>> Now come to Quick Start  in  jwt docs <<<

Update your User Model     implements JwtSubject  copy paste the methods 

This time it's guard setting
Goto   Config Folder   and    auth.php
And make changes  like this 

'defaults' => [

        'guard' => 'api',

        'passwords' => 'users',

    ],

    'guards' => [

        'web' => [

            'driver' => 'session',

            'provider' => 'users',

        ],

        'api' => [

            'driver' => 'jwt',

            'provider' => 'users',

        ],

NOw  Add some basic Authentications Routes  //remove http/request remove $routes param

• copy Routes and paste it inside the  routes/api.php
  
• Create  AuthController  php artisan make:controller     AuthController 
• Copy complete AuthController from documentation and paste it in backend    Routes->api.php

And add property AuthContorller  inside responseWithToken( ){ "user" => auth( )->user( )->name   } 
//////////////// 4th  /////////////////////////
Routing Part 

• we need a Router in forntend
• Open command prompt  goto your frontend folder 
        C:\xampp\htdocs\Laravel+Angular\frontend  
• Generate a module    i.e app-routing   ( cmd:  ng  g  m  app-routing --flat --module=app )
•  create Route
•  -> login path    and show component in app.module.ts
  
  
  show this components we are giving to the routes inside the  app.module.html    i.e 
  
  
• // :- 1st//import angular router here      for   JS 
• // :- 2nd  this is for  Angular 
• // :- 3rd create this  appRoutes object  const appRoutes: Routes
  After creating these routes how to show these components  calling by routes 
  
• Go to App.module.html  and     add   <router-outlet>
  
• ///////////////// 5th /////////////////////////
• Login Form 
  
• First go into   login component html  and make login form  
• go bootstrap.com ->components->login form  ->horzontal  login form we no need for checkbox
  https://getbootstrap.com/docs/4.5/components/forms/
  
• give Form Name   and    names to input fields  
  some important things    for angular where it will get the form data and  give validations and perform Action when it will be submitted 

<form #loginform = ngForm>           Form name 

• import ngForm   module  /  pakage 
• while submit the form then what will happened ..

<form #loginForm = ngForm  (ngSubmit) = "onSubmit( ) " >
=> create  the method onSubmit( ) inside the login.component.Ts 
=> create public form = { email:null ; password :null ;   //initially   }  inside the   login.component.TS
login.component.html  give angular names of   Fields like 
<input  name="email" [ (ngModel) ] = "form.email"> 
<input name ="pass" [( ngModel)] = "form.password">

=> And also add form   required attribute 

Make Submit button is  disabled  wheh form fields are invalid or empty 

<button type="submit"  [disabled] = "! loginForm.valid ">

=> Goto Styles.css for form field  valid OR invalid Styling

Inside styles.css 

         .ng-invalid: not(form) { 

                border-left:  5px solid  red ;         

          }; 

         .ng-valid:  not(form) { 

                border-left:  5px solid  green  ;         

          }; 

Goto login.component.Ts           when press on submit button   and then what happend ?

inside  onSubmit ( ) {    print something on console

 console.log("something");

}     

       ->if its shows on  broswers console  it  means good to for post form variables 

imports      HttpClientModule , FormsModule  IN   app.module 

AND also  

imports      HttpClient from  @angular/common/http     in   login.component.ts

And now we its time to Receive and   HTTPClient   object in the constructor  of login.ts  

And with the help of  http object  pass the form data  to the post method      like   form  data FROM angular to Laravel 

constructor ( http: HTTPCLIENT  ) { }

onSubmit ( ){ 

return    this -> http . post( 'http://localhost:8000' , this.form ) . subscribe( 

  data => console.log(data);

  error=> console.log(error) ;

} 

Here is the Repository Link y'll can  get the code

https://github.com/MuhammadUsmanS/laravelAngularAuth