DEV Community: Miller Juma

Routing with Angular 11 Router: Full-Tutorial

Miller Juma — Fri, 18 Jun 2021 05:20:08 +0000

Introduction

This tutorial will walk you through the process of creating your Angular application using Routers. We'll learn the basics of Router outlets, navigations, routes, and paths to generate a complete Angular Single Page Application (SPA).

For you to be able to follow this tutorial along, it'll be a necessity to have basic knowledge of Angular.

Getting started with Angular router

Angular Router is a core part of Angular that aids in building a single-page application. It's located in the @angular/router package.

It has a complete routing library for constructing multiple route outlets. It also supports several features such as lazy loading and routing guards for access control et cetera.

Routes and paths

Routes are objects. At the lowest level, they comprise Angular components and paths, and sometimes redirectTo. This provides more details about a specific route plus a component to load on navigation. Paths are part URLs that are used to locate a resource.

An example of a route:

----------------------------
{ 
  path:  '',
  component:  myDashboardComponent,
},
{ 
  path:  'myPath',
  component:  MyPathComponent
}
------------------------------

You'll notice that these routes contain at least a path associated with its component.

The Angular router-outlet

Router-Outlet is an Angular directive from the router library that is used to insert the component matched by routes to be displayed on the screen.

It's exported by the RouterModule and added to the template as shown below:

<router-outlet></router-outlet>

Angular route guards

In our web applications, there are resources that we usually restrict their access to authenticated users only. This feature is made possible by Angular using the route guards.

Let's look at an example:

import { Injectable } from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router} from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '@app/core/services';
@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate
{
  constructor(private router: Router, private authService: AuthService) {  }

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
  {
    const user = this.authService.user;
    if (user)
    {
      // user authentication successful
      return true;
    }
    // authentication failed, redirect user to login page
    this.router.navigate(['/login']);
    return false;
  }
}

In this authentication guard script, we implemented the CanActivate while overriding the canActivate() method returning a boolean.

If it returns, and access is allowed to the component, otherwise the user is redirected to the login page.

Navigation directives

Normally, we create navigation links in HTML using the <a href='#'>link</a> tags. In an Angular application, href in the <a> tag is replaced with the routerLink as shown below:

<a routerLink="'/testLink'">my Angular Link</a> //
<a routerLinkActive="'/testLink'">my Angular Link</a> // for active links

Routing in action

Now that we have got the basics of Angular routing, let's create a single application page.

Step 1: Generate a new Angular project

In this step, let's create a simple Angular application, 'routing-example' by running the following command on the terminal:

ng new routing-example

This prompts you to answer Yes/No questions as shown below:

// while creating a new angular project, these sets of questions are displayed.
--------------------------
    ? Do you want to enforce stricter type checking and stricter bundle budgets in t
    he workspace?
      This setting helps improve maintainability and catch bugs ahead of time.
      For more information, see https://angular.io/strict No
    ? Would you like to add Angular routing? Yes
    ? Which stylesheet format would you like to use? (Use arrow keys)
    ❯ CSS 
      SCSS   [ https://sass-lang.com/documentation/syntax#scss                ] 
      Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
      Less   [ http://lesscss.org                                             ] 
      Stylus [ https://stylus-lang.com  
---------------------------

Enter Yes for the Angular routing option to generate the routing module for our application.

Generate components

Since we're going to define routes using components, let's generate these components by running the following commands:

cd routing-example
ng g component my-dashboard && ng g component student

Now, let's navigate to the app.routing-module.ts and update the routes as shown below:

// app.routing-module.ts has the following contents
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: '',
    component: MyDashboardCompoent,
  },
  {
    path: 'students',
    component: studentComponent,
  },

];
@NgModule({
  imports: [
      RouterModule.forRoot(routes)
  ],

  exports: [
      RouterModule
  ],
})
export class AppRoutingModule { }

This line,import { Routes, RouterModule } from '@angular/router'; imports the Routes and RouterModule from the router package.
We then declare the routes constant of type Routes, which we imported earlier. We've defined the paths with their respective components.

In the @NgModule(), we import the RouterModule and pass it the routes we defined via the RouterModule.forRoot(routes) method.
We then make this RouterModule accessible by other modules by exporting it.

Setting up router outlet

Now that we've defined our application routes, let's now add the Router-Outlet to our main application template, app.component.html as seen below:

<h4>My First Single page application</h4>
<router-outlet></router-outlet>

Next, import the app. routing-module in the app. module.

-------------------------------------------
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StudentComponent } from './app.component';
import { MyDashboardComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent,
    MyDashboardComponent,
    StudentComponent
  ],
  imports: [
    ---------------
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You've reached this far? Congratulations, now let's serve our application:

cd routing-example
ng serve

This will start your application on port 4200 by default or the immediate port if 4200 is in use. You can now navigate to this route and test your routes.

Conclusion

In this tutorial, we've discussed the powerful Angular routing tool. We discussed how we can define routes and build a complete single-page application.
We've discussed other Angular routing concepts such as router outlets, paths, and routes. We also introduced the concept of Angular routing guards, by looking at an example of user authentication.
Happy coding!

Angular 11 - JWT Authentication Example & Tutorial With PHP

Miller Juma — Wed, 26 May 2021 13:59:56 +0000

A user is usually authenticated by entering a username, email address, and/or password and then being given access to various resources or services. By its very existence, authentication relies on maintaining the user's state. This seems to go against HTTP's fundamental property of being a stateless protocol.

Your Angular app will communicate with a backend that generates tokens. The Angular app can then send the token to the backend as an Authorization header to show they're authenticated. The JWT should be checked by the backend, and access should be granted based on its validity.

This tutorial will walk you through the process of developing and implementing JWT-based authentication in an Angular 11 application step by step. This tutorial takes you a step further by developing a backend service in PHP.

Implementation

In this part, I'll show you how to use PHP in conjunction with an Angular 11 client to implement JWT authentication. Even though the principle is clear, the implementation necessitates familiarity with security best practices.

The example provided here is incomplete, and it lacks several features that a production server would have. I'd therefore not recommend the source code in this tutorial for production purposes.

I'll assume you're familiar with MySQL, Angular, and PHP. You should also have composer installed in the development environment.

Step 1: Database preparation

Let's get started by building a MySQL database if you have all of the prerequisites. We'll use the MySQL client that came with the server.

Open a terminal and type the following command to start the client:

    mysql -u root -p

Depending on your MySQL configurations, enter the password when prompted.

On the window presented, run the following command to create a database.

    mysql> create database jwt-database;

In the jwt-database we created earlier, create a table jwt-users as follows:

mysql> use jwt-database;
mysql> create table `jwt-users` (
  `user_id` int auto_increment primary key,
  `fullname` varchar(40) ,
  `username` varchar(40) ,
  `email_address` varchar(40) unique,
  `password` varchar(40) not null,

Now, cd into the directory we created earlier by running the following command:

    cd jwt-server

NOTE: Depending on your development environment, this path may differ.

Connecting to your database

In your working directory, create a folder db_configurations inside the tokens-api directory.

cd tokens-api && mkdir configurations

Then,

cd configurations

<?php
class DB_Connection
{
    private $db_host     = "localhost"; //change to your  host
    private $db_name     = "jwt-database";//change to your db
    private $db_username = "root"; //change to your db username
    private $db_password = ""; //enter your password
    private $conn;
    public function db_connect(){
        $this->conn = null;
        try
        {
            $this->connection = new PDO("mysql:host=" . $this->db_host . ";dbname=" . $this->db_name, $this->db_user, $this->db_password);
            $conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
        }
        catch(PDOException $e){
            echo "Error " . $e->getMessage();
        }
        return $this->connect;
    }
}

Step 2: Install PHP token generator package

PHP has a library JWT library that can be used to generate auth tokens to identify clients accessing the backend service.

To install this PHP library in your system, you'll need a composer installed.
You can verify its installation by running the following command:

composer -v

Now, proceed and import the library by running the following command:

composer require firebase/php-jwt

To allow for communication between our PHP backend and angular application, we need to set CORS headers.
Let's proceed and crearte a file header.php and add the following CORS scripts:

header("Access-Control-Max-Age: 3600");
header("Access-Control-Allow-Methods: POST, PUT, DELETE, UPDATE");
header("Access-Control-Allow-Origin: * ");
header("Content-Type: application/json; charset=UTF-8");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

Step 3: User registration API endpoint

Now that we have the php-jwt library in our system, let's proceed and create a simple registration system. In your current directory, add the following lines of code.

<?php
include_once './configurations/db.php';
include_once './header.php';
$full_name
$email_address = '';
$password1 = '';
$connection = null;
$db = new DB_Configuration();
$connection = $db->db_connect();
$api_data = json_decode(file_get_contents("php://input"));
$full_name = $api_data->full_name;
$email_address = $api_data->email;
$password = $api_data->password;
$query = "INSERT INTO " jwt_users . "
                SET full_name = :fname,
                    email = :emailAdress,
                    password = :pwd";
$stmt = $conn->prepare($query);
$stmt->bindParam(':fname',$full_name)
$stmt->bindParam(':email', $email_address);
$stmt->bindParam(':password', $password1);
$stmt->execute();
?>

User sign-in API endpoint

Inside the tokens-api directory, make a signin.php file and add the code below to check the client qualifications to access our backend services.
To validate the user credentials and return a JSON Web Token to the client, build a signin.php file script within the tokens-api directory with the following code:

<?php
include_once './config/database.php';
require "../vendor/autoload.php";
//dont forget to add header configurations for CORS
use \Firebase\JWT\JWT;
$email_address = '';
$password = '';
$dbService = new DB_Connection();
$connection = $dbService->db_connect();
$api_data = json_decode(file_get_contents("php://input"));
$user_email = $api_data->email_address;
$password = $api_data->password;
$table = 'Users';
$sql = "SELECT user_id,first_name, last_name,`password` FROM " . $table . " WHERE email_address =:email  LIMIT 0,1";
$stmt = $conn->prepare( $query );
$stmt->bindParam(':email', $email_address);
$stmt->execute();
$numOfRows = $stmt->rowCount();
if($numOfRows) > 0){
    $row = $stmt->fetch(PDO::FETCH_ASSOC);
    $user_id    = $row['id'];
    $first_name = $row['first_name'];
    $last_name = $row['last_name'];
    $pass       = $row['password'];
    if(password_verify($password, $pass))
    {
        $secret_key = "MillerJumaWilliam";
        $issuer_claim = "localhost"; 
        $audience_claim = "THE_AUDIENCE";
        $issuedat_claim = time(); // time issued 
        $notbefore_claim = $issuedat_claim + 10; 
        $expire_claim = $issuedat_claim + 60; 
        $token = array(
            "iss" => $issuer_claim,
            "aud" => $audience_claim,
            "iat" => $issuedat_claim,
            "nbf" => $notbefore_claim,
            "exp" => $expire_claim,
            "data" => array(
                "id" => $id,
                "firstName" => $first_name,
                "lastName" => $last_name,
                "userEmail" => $email_address
        ));
        $jwtValue = JWT::encode($token, $secret_key);
        echo json_encode(
            array(
                "message" => "success",
                "token" => $jwtValue,
                "email_address" => $email_address,
                "expiry" => $expire_claim
            ));
    }
    else{
        echo json_encode(array("success" => "false"));
    }
}
?>

You can describe the token's data structure however you like, but certain reserved JWT statements should be specified properly because they affect the token's validity.

The JWT::encode() method converts the PHP array to JSON format, signs the payload, and then encodes the final token before sending it to the client i.e browser.
For registering and logging in users, we now have two RESTful endpoints. Let's test if our endpoints are working by running the following in the token-api folder.

cd tokens-api && php -S 127.0.0.1:8000 // to start our development server

Now that we have a fully functional REST API with a JWT token, let's proceed and create our angular project.

Setting up angular project to consume PHP auth endpoints

It's worth noting that this tutorial does not teach you how to set up an angular project, for more information, visit the angular docs.

In your new angular project, run the following command to create authService service:

ng generate service auth

We will use this service to sign users in and out of our angular application.
Let's add the following codes to our auth service.


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class AuthService {
    public baseUrl = "localhost:8000";
    private loggedUserSubject: BehaviorSubject<User>;
    public loggedInUser: Observable<any>;
    constructor(private httpClient: HttpClient) {
        getLoggedUser = JSON.parse(localStorage.getItem('loggedInUser'));
        this.loggedUserSubject = new BehaviorSubject(this.getLoggedUser));
        this.loggedInUser = this.loggedUserSubject.asObservable();
    }
    loginUser(emailAddress: string, password: string) {
        return this.http.post<any>(`${baseUrl}/`, { emailAddress, password })
            .pipe(map(response=> {
                localStorage.setItem('loggedInUser', JSON.stringify(response));
                this.loggedUserSubject.next(response);
                console.log(response);
                return response;
            }));
    }
    logoutUser() {
        localStorage.removeItem('loggedInUser');
        this.loggedUserSubject.next(null);
    }
    public get loggedInUserValue(){
        return this.loggedUserSubject.value;
    }
}

In the auth service above, as the user signs in and out of the system, RxJS Subjects and Observables are used to store the current user.

Set up login component

Now that we've got a service to send HTTP requests to our PHP endpoint, let's proceed and create a login component to test our code by running the following command:

ng g c login

In your new component template, copy and paste the following piece of code:

<div class="col-md-6 offset-md-3 mt-5">
    <div class="card">
        <h4 class="card-header">Authentication Form</h4>
        <div class="card-body">
            <form [formGroup]="signinForm" (ngSubmit)="onSubmit()">
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="text" formControlName="email" class="form-control"/>

                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" formControlName="password" class="form-control"/>
                </div>
                <button class="btn btn-danger">
                   Sign In
                </button>
            </form>
        </div>
    </div>
</div>

The form we created above makes use of Angular's Reactive Forms Module. User information is sent to our component when a click event is fired.

With our login template ready, in your login.compnent.ts file, add the following code snippets to get user inputs.

It's in this script that the user's value is captured then sent to the API service we created earlier via our auth service.

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from './service/auth.service';
@Component({ 
templateUrl: 'login.component.html' 
})
export class LoginComponent implements OnInit {
    signinForm: FormGroup;

    constructor(
        private fb: FormBuilder,
        private authService: AuthService
    ) {  }
    ngOnInit() {
        this.signinForm = this.fb.group({
            email: [null, [Validators.required, Validators.email]],
            password: [null, Validators.required]
        });
    }
    get form() 
    { 
        return this.signinForm.controls; 
    }
    onSubmit() {
        this.authService.loginUser(this.form.email.value, this.form.password.value)
            .subscribe(
                data => {
                    console.log(data);
                },
                error => {
                    console.log(error);
                });
    }
}

Store login token in local storage

Angular ships with HTTP interceptors. Any request will therefore be passed a token that will be used in our backend to verify user validity.

Let's go ahead and create an interceptor for our application, AuthInterceptor by running the following command:

ng g interceptor auth

...
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './service/auth.module';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) { }
    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let loggedInUser = this.authService.currentUserValue;
        token = JSON.parse(localStorage.getItem(user.token));
        if (token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${token}`
                }
            });
        }
        return next.handle(request);
    }
}

Now let's go ahead and add this script in our app.module.ts to ensure that any requests we send are cloned and token attached.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { appRoutingModule } from './app.routing';
import { AuthInterceptor} from 'helpers/AuthInterceptor';
import { DashboardComponent } from './dashboard';
import { LoginComponent } from './login';
@NgModule({
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        HttpClientModule,
        appRoutingModule
    ],
    declarations: [
        AppComponent,
        DashboardComponent,
        LoginComponent
    ],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true 
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Well, let's start our angular application by running the following command:

ng serve --open //starts on port 4200 by default unless you specify otherwise

You can now make requests to our PHP endpoint and login while the generated token is stored in your browser's local storage.

Conclusion

In this tutorial we have learned how to use JWT authentication in our Angular 11 application with PHP RESTful APIs. We also implemented other authentication strategies such as token authentication in your Angular application.
Happy coding.

Laravel Socialite

Miller Juma — Fri, 11 Sep 2020 10:40:55 +0000

To get started with Socialite, use Composer to add the package to your project's dependencies:

bash composer require laravel/socialite

Before using Socialite, you will also need to add credentials for the OAuth services your application utilizes. These credentials should be placed in your config/services.php configuration file, and should use the key facebook, twitter, linkedin, google, github, gitlab or bitbucket, depending on the providers your application requires. For example:

'github' => [
    'client_id' => env('GITHUB_CLIENT_ID'),
    'client_secret' => env('GITHUB_CLIENT_SECRET'),
    'redirect' => 'http://your-callback-url',
],

Next, you are ready to authenticate users! You will need two routes: one for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication. We will access Socialite using the Socialite facade:

<?php
/**
*@author Miller Juma
**/

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    /**
     * Redirect the user to the GitHub authentication page.
     *
     * @return \Illuminate\Http\Response
     */
    public function redirectToProvider()
    {
        return Socialite::driver('github')->redirect();
    }

    /**
     * Obtain the user information from GitHub.
     *
     * @return \Illuminate\Http\Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('github')->user();

        // $user->token;
    }
}

The redirect method takes care of sending the user to the OAuth provider, while the user method will read the incoming request and retrieve the user's information from the provider.

You will need to define routes to your controller methods:

use App\Http\Controllers\Auth\LoginController;

Route::get('login/github', [LoginController::class, 'redirectToProvider']);
Route::get('login/github/callback', [LoginController::class, 'handleProviderCallback']);

Try it.Will be happy to help you out when stuck...