DEV Community: Akshay

Send notification to slack from the Jenkins CI Job and Jenkinsfile | e Avni Tech

Akshay — Fri, 13 Aug 2021 03:45:42 +0000

Today we will learn how to send success, error notification to slack through the Jenkins CI job and from the Jenkinsfile(Declarative Pipeline).

While working on Jenkins sometimes, we need to send notifications to the Slack channel when the Jenkins CI Job run successfully or there was some error, so the team member can be known without checking the CI Job on the Jenkins UI.
it is very helpful to check the Jenkins CI staus on the slack channel.
For sending the notification to the Slack channel, we will use Slack Notification plugin.

Installation of Slack Notification Plugin

Install Instructions for the plugin

1. In your Jenkins dashboard, click on Manage Jenkins from the left navigation.
2. Navigate to Manage Plugins
3. Click on the tab name as Available
4. Search for Slack Notification
5. Check the box next to install

Jenkins CI App installation in Slack

1. Go to Slack App Directory and search for Jenkins CI
2. Click on the Add to Slack button

3. Now select the channel and click on the Add Jenkins CI Integration
4. Copy the Token from the Jenkins CI Page and Click on the Save Setting button at the bottom

We have installed the Jenkins CI App on Slack and got the Token
Now we will configure the Token into the Slack Notification plugin

Slack notification plugin configuration in Jenkins

In the first step, we have installed the Slack notification plugin. now time to configure the plugin.
Please follow the below steps

1. Click on Manage Jenkins again in the left navigation and then click to Configure system.
1. Find the Global Slack notifier settings section and add the following values
- a. Team subdomain:
- b. Integration token credential ID:
- c. The other fields are optional. You can click on the question mark icons next to them for more information.
- d. Press Save once you’ve finished.
1. Click on the Test connection button to test the notification in the slack channel. Below is the sample notification

Configuration for project

There are 2 ways to configure in project

1. Through the UI panel

a. For each project that you want to receive notifications for, choose Configure from the project’s menu.
b. Then you’ll need to add Slack notifications to the Post-build actions for this project.

c. In the Slack notifications section, choose the events you want to be notified about.

2. Send notification through Jenkinsfile file

If you are using Jenkinsfile then you can use this code to send the notification to slack channel

slackSend "Build Started - ${env.JOB_NAME} ${env.BUILD_NUMBER} (<${env.BUILD_URL}|Open>)"

You can customize the message and can add more configurations like notify to a particular user, colour etc

attachments (optional)
- Type: Object
baseUrl (optional)

Allows overriding the Slack compatible app URL specified in the global configuration.
- Type: String
blocks (optional)
- Type: Object
botUser (optional)

Bot user option indicates the token belongs to a custom Slack app bot user in Slack.

If the notification will be sent to a user via direct message, the default integration sends it via @slackbot, use this option if you want to send messages via a bot user.
- Type: boolean
channel (optional)

Allows overriding the Slack Plugin channel specified in the global configuration. Multiple channels may be provided as a comma, semicolon, or space-delimited string.
```
 slackSend channel: "#channel-name", message: "Build Started: ${env.JOB_NAME} ${env.BUILD_NUMBER}"
```
- Type: String
color (optional)

An optional value that can either be one of good, warning, danger, or any hex color code (eg. #439FE0). This value is used to color the border along the left side of the message attachment.
```
slackSend color: "#439FE0", message: "Build Started: ${env.JOB_NAME} ${env.BUILD_NUMBER}"`
```
- Type: String
failOnError (optional)

If set to true, then the step will abort the Workflow run if there is an error sending message.
```
slackSend failOnError: true, message: "Build Started: ${env.JOB_NAME} ${env.BUILD_NUMBER}"`
```
- Type: boolean
iconEmoji (optional)

Choose a custom emoji to use as the bot's icon in Slack, requires using a bot user
- Type: String
message (optional)

This is the main text in a message attachment and can contain standard message markup. The content will automatically collapse if it contains 700+ characters or 5+ linebreaks, and will display a "Show more..." link to expand the content. The message may include global variables, for example, environment and current build variables:
```
slackSend "started ${env.JOB_NAME} ${env.BUILD_NUMBER} (<${env.BUILD_URL}|Open>)"`
```
- Type: String
notifyCommitters (optional)

Notify committers via direct message in addition to specified channels, requires using a bot user
- Type: boolean
replyBroadcast (optional)
- Type: boolean
sendAsText (optional)
- Type: boolean
teamDomain (optional)

Allows overriding the Slack Plugin Integration Team Domain specified in the global configuration.
- Type: String
timestamp (optional)

Allows updating an existing message instead of posting a new one.
- Type: String
token (optional)

Allows overriding the Slack Plugin Integration Token specified in the global configuration.
- Type: String
tokenCredentialId (optional)

The ID for the integration token from the Credentials plugin to be used to send notifications to Slack. The "Kind" of the credential must be "Secret text." If both "Integration Token" and "Integration Token Credential ID" are set, the "Integration Token Credential ID" will take precedence for security reasons.

This overrides the global setting.
- Type: String
username (optional)

Choose a custom username to use as the bot's name, requires using a bot user
- Type: String

Conclusion

We learnt how to send notifications to the slack channel through the Jenkins CI, Jenkinsfile (Pipeline). Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter

File upload in angular 12 | e Avni Tech

Akshay — Thu, 05 Aug 2021 16:13:28 +0000

Check my latest blog on File upload in angular 12 https://eavnitech.com/blog/file-upload-in-angular-12/

A complete guide of authentication in angular 11

Akshay — Wed, 21 Apr 2021 14:59:20 +0000

Angular is the most trending js frameworks for the single page App and front end development, now I am here to explain how the login/authentication functionality works in angular.
Here are some basic concepts of authentication:

How the authentication works

In angular if a user enters the email and password on the login page then the email/password should be validated from the backend server, so we should call a login API and the API will validate the passed email/password at the server and return the response.
so for calling the server we use the HTTP client module

a. How to call the backend API

Here in the code, we created a login function and we are passing login form data(email and password).
this function sends a request to the server and receives the response from the server.

  // Sample code to call the server API
  login(formData:any):Observable<HttpResponse<any>>{

    return this.http.post<any>("Server API URL", formData,  { observe: 'response' })
    .pipe(
      tap((resp: HttpResponse<CommonResponse>) => {
        if(resp.headers.get('x-auth')){
        // Here we are checking the x-auth in header, if x-auth is present it means user is logged in
          this.cookieService.set("currentUser",resp.headers.get('x-auth'));
          // Storing the token in cookie
          this.loginStatus.next(true);
        }
        return resp;  
      }),
      catchError(this.handleError)
    );
  }

b. How to manage the authentication

To manage the authentication, angular provides the route guards , by using the guard we can restrict the end-user to open the page which one we don't want to open the page without login.

After getting the response from the server, we store the token in the cookie


  if(resp.headers.get('x-auth')){
    this.cookieService.set("currentUser",resp.headers.get('x-auth'));
    this.loginStatus.next(true);
  }

c. How auth guard works

Angular provides route guards to prevent users from navigating to parts of an app without authorization. The following route guards are available in Angular:

CanActivate
CanActivateChild
CanDeactivate
Resolve
CanLoad

Here in the below code, we are checking the cookie is there or not, if there is a cookie that we have put in the login function then the user is logged in.


  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    if (this.cookieService.get('currentUser')) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/login']);
    return false;
  }

This is the basic concept of authentication in angular, now times to build a login app in angular.

Installation Guide of angular App:

You can use angular CLI to create the project, install the Angular CLI, open the terminal and run the following command

npm install -g @angular/cli
Run ng new login-in-angular command to create the angular project, whiling running the command , the terminal will ask for some features details, by pressing enter you can choose the default settings.

You will see below the settings

ng new login-in-angular
? Do you want to enforce stricter type checking and stricter bundle budgets in the 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? No

? Which stylesheet format would you like to use? CSS
CREATE login-in-angular/angular.json (3639 bytes)
CREATE login-in-angular/package.json (1209 bytes)
CREATE login-in-angular/README.md (1026 bytes)
CREATE login-in-angular/tsconfig.json (538 bytes)
CREATE login-in-angular/tslint.json (3185 bytes)
CREATE login-in-angular/.editorconfig (274 bytes)
CREATE login-in-angular/.gitignore (631 bytes)
CREATE login-in-angular/.browserslistrc (703 bytes)
CREATE login-in-angular/karma.conf.js (1436 bytes)
CREATE login-in-angular/tsconfig.app.json (287 bytes)
CREATE login-in-angular/tsconfig.spec.json (333 bytes)
CREATE login-in-angular/src/favicon.ico (948 bytes)
CREATE login-in-angular/src/index.html (303 bytes)
CREATE login-in-angular/src/main.ts (372 bytes)
CREATE login-in-angular/src/polyfills.ts (2830 bytes)
CREATE login-in-angular/src/styles.css (80 bytes)
CREATE login-in-angular/src/test.ts (753 bytes)
CREATE login-in-angular/src/assets/.gitkeep (0 bytes)
CREATE login-in-angular/src/environments/environment.prod.ts (51 bytes)
CREATE login-in-angular/src/environments/environment.ts (662 bytes)
CREATE login-in-angular/src/app/app.module.ts (314 bytes)
CREATE login-in-angular/src/app/app.component.html (25725 bytes)
CREATE login-in-angular/src/app/app.component.spec.ts (979 bytes)
CREATE login-in-angular/src/app/app.component.ts (223 bytes)
CREATE login-in-angular/src/app/app.component.css (0 bytes)
CREATE login-in-angular/e2e/protractor.conf.js (904 bytes)
CREATE login-in-angular/e2e/tsconfig.json (274 bytes)
CREATE login-in-angular/e2e/src/app.e2e-spec.ts (670 bytes)
CREATE login-in-angular/e2e/src/app.po.ts (274 bytes)
√ Packages installed successfully.

cd login-in-angular
Run npm start or ng serve command to run the angular App

Now you will see the below screen in your browser

Installation of required modules

npm i ngx-cookie-service

1. Create the login component

We will generate the login component so run ng g c login, this command will generate the login components and its file.
your login component file structure will look like this

You can use the below code for your login component


  //File location in login folder and file name login.component.ts
    import { Component, OnInit } from '@angular/core';
    import {FormGroup, FormControl, Validators} from '@angular/forms';
    import { Router } from '@angular/router';
    import { CommonResponse } from "../common-response";
    import { ApiService } from "../auth/api.service";
    @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
    })
    export class LoginComponent implements OnInit {

      loginForm = new FormGroup({
        email: new FormControl('', [Validators.required, Validators.email]),
        password: new FormControl('', [Validators.required])
      })

      public loginError:String;
      constructor(private apiService:ApiService,private router: Router) { }

      ngOnInit() {}

      onSubmit(){  
        if(this.loginForm.valid){
          this.apiService.login(this.loginForm.value)
          .subscribe((data) => {
            console.log(data);
            if(data.status === 200 && !data.body.ErrorCode){
              this.router.navigate(['/dashboard']);
            }else{
              this.loginError = data.body.message;
            }        
          },
          error => this.loginError = error
          )
        }    
      }
    }

You can use the below code in your login.component.html file

  <!-- File location in login folder and file name login.component.html -->
<div class="form-signin">
    <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
        <p *ngIf="loginError">{{loginError}}</p>
        <mat-form-field>
            <input matInput placeholder="Enter your email" formControlName="email" required>
            <mat-error *ngIf="!loginForm.controls.email.valid">Please enter valid email id</mat-error>
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Enter your password" type="password" formControlName="password" required>
            <mat-error *ngIf="!loginForm.controls.password.valid">Please enter password</mat-error>
        </mat-form-field><br />
        <button type="submit" mat-raised-button color="warn">Login</button>
    </form>
</div>

2. Create the API service

We are creating the API service to manage all backend API calls, you can create all your API here.
Run ng g service api to generate the API service file.

You can copy the below code in your API service file



    import { Injectable } from '@angular/core';
    import { HttpClient, HttpResponse, HttpErrorResponse } from '@angular/common/http';
    import { CookieService } from 'ngx-cookie-service';
    import { Observable, throwError, BehaviorSubject } from 'rxjs';
    import { catchError, map, tap } from 'rxjs/operators';
    import { Router } from '@angular/router';

    import { CommonResponse } from "./common-response";
    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {
      private endPoint: string = "/api/";
      loginStatus = new BehaviorSubject<boolean>(this.hasToken());
      constructor(private http: HttpClient, private cookieService: CookieService, private router: Router) { }
      /**
       * 
       * @param formData as the login form data
       */
      login(formData: any): Observable<HttpResponse<CommonResponse>> {
        return this.http.post<CommonResponse>(this.endPoint + "login", formData, { observe: 'response' })
          .pipe(
            tap((resp: HttpResponse<CommonResponse>) => {
              if (resp.headers.get('x-auth')) {
                this.cookieService.set("currentUser", resp.headers.get('x-auth'));
                this.loginStatus.next(true);
              }
              return resp;
            }),
            catchError(this.handleError)
          );
      }
      /**
       * 
       * @param error error 
       */
      private handleError(error: HttpErrorResponse) {
        if (error.error instanceof ErrorEvent) {
          // A client-side or network error occurred. Handle it accordingly.
          console.error('An error occurred:', error.error.message);
        } else {
          // The backend returned an unsuccessful response code.
          // The response body may contain clues as to what went wrong,
          console.error(
            `Backend returned code ${error.status}, ` +
            `body was: ${error.error}`);
        }
        // return an observable with a user-facing error message
        return throwError(
          'Something bad happened; please try again later.');
      };

      logout() {
        this.loginStatus.next(false);

        this.cookieService.deleteAll();
        this.router.navigate(['/login']);
      }

      /**
      *
      * @returns {Observable<T>}
      */
      isLoggedIn(): Observable<boolean> {
        return this.loginStatus.asObservable();
      }
      /**
       * if we have token the user is loggedIn
       * @returns {boolean}
       */
      private hasToken(): boolean {
        return this.cookieService.check('currentUser');
      }
    }

3. Create the response interface

Now we need to create a response interface that will be mapped with your returned data from the Server.
in the ApiService file we used import { CommonResponse } from "./common-response";
create common-response.ts file

    export interface CommonResponse {
        ErrorCode: number,
        message:String,
        data:Object      
    }

### 4. Create the auth guard
As we already know guard is used to preventing users from navigating to parts of an app without authorization.
Please run ng g guard auth to generate to auth guard. you will see the newly created file auth.guard.ts
The command will ask for some settings, please enter for default settings.

    ng g guard auth
    ? Which interfaces would you like to implement? (Press <space> to select, <a> to
    ? Which interfaces would you like to implement? CanActivate
    CREATE src/app/auth.guard.spec.ts (331 bytes)
    CREATE src/app/auth.guard.ts (457 bytes)

You can use the below code in your auth guard file.


  import { Injectable } from '@angular/core';
  import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
  import { Observable } from 'rxjs';
  import { CookieService } from 'ngx-cookie-service';

  @Injectable({
    providedIn: 'root'
  })
  export class AuthGuard implements CanActivate {
    constructor(private cookieService: CookieService, private router: Router) { }

    canActivate(
      next: ActivatedRouteSnapshot,
      state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

      if (this.cookieService.get('currentUser')) {
          // logged in so return true
          return true;
      }

      // not logged in so redirect to login page with the return url
      this.router.navigate(['/login']);
      return false;
    }
  }

5. Create profile component

Now times to create a profile component that will only accessible if the user is logged in.

Run npm g c profile to generate the profile component

Plese use below code for profile.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from "../api.service";

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {


  constructor(private apiService:ApiService) { }

  ngOnInit() {
  }
  logout(){
    this.apiService.logout();
  }

}

Please use below code in profile.component.html


<p>Welcome to Dashboard</p>
<button mat-raised-button color="warn" (click)="logout()">Logout</button>

6. Routing & service implementation

We have created 2 components, ApiService & guard files not time to implement it in the AppModule.ts file

create app-routing.module.ts file to manage all pages. Please use the below code in your app-routing.module.ts file


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component'; 
import { ProfileComponent } from './profile/profile.component';
import { AuthGuard } from "./auth.guard";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'dashboard', component: ProfileComponent,canActivate: [AuthGuard]}
];

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

export class AppRoutingModule { }

Import the AppModule file in your
Your app.module.ts file will look like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpClientModule, HTTP_INTERCEPTORS  } from "@angular/common/http";
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { environment } from '../environments/environment';
import { LoginComponent } from './login/login.component';
import { ProfileComponent } from './profile/profile.component';
import { ApiService } from './api.service';
import { CookieService } from 'ngx-cookie-service'; 

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ProfileComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [ApiService, CookieService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add router-outlet in your app.component.ts file

<router-outlet></router-outlet>

Conclustion

So we have implemented the code in the angular app, and I hope you are able to run it.

Run npm start to check run the app-login
http://localhost4200 Hit the URL in the browser
If you want to accessible http://localhost4200/dashboard, you will be redirected to http://localhost4200/login page, you can't access it without authorization.
Run npm start to run the server and test it.

Demo

After implementing the code now time to check the demo, so you can check the angular-login-demo

Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter

Login example in angular 11

Akshay — Tue, 13 Apr 2021 00:24:12 +0000

Angular is the most trending JvaScript framework for the single page App and front end development.

Please read login in angular 11

https://eavnitech.com/blog/a-complete-guide-of-authentication-in-angular-11/

Authentication in angular 11

Akshay — Sun, 11 Apr 2021 07:06:49 +0000

I have posted blog , please give it a try

https://eavnitech.com/blog/a-complete-guide-of-authentication-in-angular-11/

Most useful npm command

Akshay — Mon, 05 Apr 2021 14:01:52 +0000

Below is the list of the most useful npm command.

1. npm init: to generate the package.json file
2. npm i or npm install: to install all packages of the package.json file
3. npm i -g: install the package globally
4. npm start: It will execute the entry point script you added in the package.json file
5. npm install npm@latest -g: Upgrade the npm package to the latest version
6. npm outdated: list of all out date packages
7. npm list -g: list of all global npm packages
8. npm uninstall "package name": it will uninstall the package
9. npm publish: This is used to publish the package at npmjs

Your suggestion much appreciated

Authentication in express with JWT token | e Avni Tech

Akshay — Mon, 05 Apr 2021 02:02:19 +0000

Today we will discuss how to authenticate the users in express js with JWT token.

So first let's understand the JWT token

What is JWT token

JWT stands for javascript web token, which is used to send or receive the data between 2 parties securely.

It can be signed with a secret (with the HMAC algorithm) or a public/private key pair using RSA or ECDSA.
JWTs are an open, industry-standard RFC 7519 method.
JWT is used for authentication, authorization & for information exchange.

Implementation of JWT in expressjs

Let's set up the authentication with expressjs , so first we will install all required npm packages

Run npm init to create the package.json, i hope you already know about the npm commands
run npm install express to install express.js
run npm i jsonwebtoken to install the JWT token package, we will use jsonwebtoken package

Express server setup

Now we will set up the express js server so we will authenticate the end-user.

Please create an index.js file and add the below code.


const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})


app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

We have done the express.js server setup now time to implement the jsonwebtoken package.

Now please use the below code in your js file



var jwt = require('jsonwebtoken'); // import the jsonwebtoken at top of your file

Now time to generate the JWT token,
there are various way to generate the token like

Generate after authenticating the user from DB
Generate after signup the user in this tutorial, we are just creating a JWT token API

app.get('/createJwtToken', (req, res) => {
    let yourKey = 'yourKey';
    var token = jwt.sign({ name: 'eavnitech' }, yourKey);
    res.send({token});
});

in case of login , you can call var token = jwt.sign({ name: 'eavnitech' }, yourKey); this code just after authenticate from the DB

so when you hit the API http://localhost:3000/createJwtToken and you will see the JWT token in the API response.

Now time to verify the generated JWT token. there are various way to send the JWT token to the server like

send the token in the header (Best way)
send in the query param(Not a good way)
Send with body data

For now, i have created an API to verify the JWT token


app.post('/verifyJwtPostBody', (req, res) => {
    let token = req.body.token;
    var decoded = jwt.verify(token, yourKey);

    res.send({decoded});
});

You can access the API by the post request on http://localhost:3000/verifyJwt and send the token in the body param.
Your body will be look like this


POST /verifyJwtPostBody HTTP/1.1
Host: localhost:3000
Content-Type: application/json
Content-Length: 24

{"token" : "your token"}

Authenticate with middleware

Let's create a middleware so we can authenticate if the JWT token is verified then only we will allow accessing the URL(resource).

As we know there are various ways to send the JWT token from client(browser, mobile App) to the server.

For now we will send the token in the header as x-auth.

Below is the middleware code, here we are checking the client header and getting the token from it.

after that, we are verifying the token if the JWT token is valid then only the user can access the code in the API else the middleware will send 401 HTTP code status.


var middleware = function(req, res, next){
    var token = req.header('x-auth');

    jwt.verify(token, yourKey, function(err, decoded) {    
    if (err) {    
        res.status(401).send({message:'Please login'});
    } 
     next();
  });
}

In the below code, we added the middleware, if the JWT token is valid then only the end-user can access the code.


app.post('/verifyThroughHeader', middleware , (req, res) => {

    res.send({result:"Your are authenticated"});
});

Let's sum up, your index.js file will look like this



const express = require('express')
const app = express()
const port = 3000

var jwt = require('jsonwebtoken');
var yourKey = "yourkey";
var bodyParser = require('body-parser')
app.use(bodyParser.json())



app.get('/', (req, res) => {
  res.send('Hello World!')
})


var middleware = function(req, res, next){
    var token = req.header('x-auth');

    jwt.verify(token, yourKey, function(err, decoded) {    
    if (err) {    
        res.status(401).send({message:'Please login'});
    } 
     next();
  });
}

app.get('/createJwtToken', (req, res) => {
    var token = jwt.sign({ name: 'eavnitech' }, yourKey);

    res.send({token});
});



app.post('/verifyJwtPostBody', (req, res) => {
    let token = req.body.token;
    var decoded = jwt.verify(token, yourKey);

    res.send({decoded});
});

app.post('/verifyThroughHeader', middleware , (req, res) => {

    res.send({result:"Your are authenticated"});
});


app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

Your package.json will look like this


{
  "name": "authentication-in-express-with-jwt-token",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1"
  }
}

Conclusion

So we learned how to authenticate the end-user in expressjs with JWT token with middleware and without middleware.

Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter

Loop and iteration in javascript with example

Akshay — Wed, 24 Mar 2021 18:11:51 +0000

Hello all, today we will learn the ways to iterate the array & object in the javascript.
Loop are the basic way to iterate the array & object.

1. Map

map is used to iterate the array elements & you can perform any operation on the element of the array like addition, subtraction, multiplication, division etc.
it takes a callback function to iterate the array and return a new array.

Syntax

[].map(callback);

Example

let array = [10,20,30,40,50];


let returnValue = array.map((element) => element*10);

console.log(returnValue);

// output 
[ 100, 200, 300, 400, 500 ]

// in the map function we are multiplication 10 to every element.

2. forEach

forEach is used to iterate the array elements & it takes a callback function that will be called with each iteration of the array elements.

Syntax


[].forEach(function(currentValue, index, arr), thisValue)

`currentValue` -> The value of the current element
`index` -> The array index of the current element
`arr` -> The array object the current element belongs to
`thisValue` -> A value to be passed to the function to be used as its "this" value.
If this parameter is empty, the value "undefined" will be passed as its "this" value

Example

let array = [10,20,30,40,50];


array.forEach((value, index, arr) => console.log(value, index, arr));

// output

10 0 (5) [10, 20, 30, 40, 50]
20 1 (5) [10, 20, 30, 40, 50]
30 2 (5) [10, 20, 30, 40, 50]
40 3 (5) [10, 20, 30, 40, 50]
50 4 (5) [10, 20, 30, 40, 50]
undefined

The undefined is the returned value of the forEach() call.

3. for

for loop is the most basic and used loop in the programming language.

for( initialization; condition; increment/decrement){

    // Your logic
}

Example

let array = [10,20,30,40,50];
for(let i=0; i< array.length; i++){
    console.log(array[i]);
}

// output
10
20
30
40
50

it is the fastest loop as compared to other loops
it is an in-built loop and does not take any callback
it is used to iterate the large size of the array
We can use the break keyword to stop the iteration of the array

4. while

while loop executes the logic(code) once the condition is true.


// define any variable
while(condition){
    // your logic
    // increment/decrement the variable
}

Example

let array = [10,20,30,40,50];
let index = 0;
while (index < array.length) {
    console.log(array[index]);
    index++;
}


// output

10
20
30
40
50

5. Do while

do-while loop executes the statement block atlease once the condition is false i.e. it will execute the statement once either the condition is false.

do {
  // Your logic
}
while (condition);

Example


let result = '';
let i = 0;

do {
  i = i + 1;
  result = result + i;
} while (i < 5);

console.log(result);
// Output : "12345"

6. for in

This is used to iterate the properties of the object.


var array = { fname:"John", lname:"Doe", age:25 };

for(let element in array){
    console.log(element, array[element]);
}


// output

fname John
lname Doe
age 25

Easy to use
Syntax is very easy
Does not have any callback

7. for of

for of is used to iterate the array of object.

Syntax


for (variable of iterable) {
  // statement
}

Example

let array = [10,20,30,40,50];

for(let element of array){
    console.log(element);
}

// output
10
20
30
40
50

Easy to use
Syntax is very easy
Does not have any callback

Thank you :)

I will be happy to answer your queries on my Twitter handle Twitter

What is your favorite JavaScript framework?

Akshay — Tue, 23 Mar 2021 16:46:21 +0000

Lets make a list of top js frameworks, please add your comments.
Thanks

How to export CSV file in angular

Akshay — Tue, 23 Mar 2021 14:01:28 +0000

There are 2 ways to export(download) the CSV on the web.

Generate at the server-side and then provide a link to download
Generate at client-side through angular

So today we will discuss the client-side through angular

Installation

We will use angular2-csv package to generate the CSV at the client-side(browser)
Please run this command at your project root

npm install --save angular2-csv

Setup

Please include the below code in you app.module.ts and in the child module where you want to implement the download functionality

// file name app.module.ts
import { Angular2CsvModule } from 'angular2-csv';

- Add in imports section of the `app.module.ts file`

imports: [
  BrowserModule,
  AppRoutingModule,
  Angular2CsvModule
],

- Add the download button

In your app.component.html file or your html file where you want to add the download button,

<angular2csv [data]="data" filename="test.csv" [options]="options"></angular2csv>

- in your `app.component.ts` add this or you can replace by it

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  // option veriable
  options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalseparator: '.',
    showLabels: false,
    headers: [],
    showTitle: true,
    title: 'asfasf',
    useBom: false,
    removeNewLines: true,
    keys: ['approved','age','name' ]
  };

  // This data will be generated in the csv file
  data = [
    {
      name: "Test, 1",
      age: 13,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 2',
      age: 11,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    },
    {
      name: 'Test 3',
      age: 10,
      average: 8.2,
      approved: true,
      description: "using 'Content here, content here' "
    }
  ];
}

Demo

You can check the demo from Here and can get the code from the Github repo

Please give it a try and I will be happy to answer your queries on my Twitter handle Twitter

Map , reduce & filter

Akshay — Tue, 23 Mar 2021 01:45:21 +0000

How to add redirects in gatsby with netlify

Akshay — Mon, 22 Mar 2021 09:35:57 +0000

I was working on a gatsby project and I faced an issue how can I redirect the URL in gatsby at netlify server. So here I am sharing the solution for handling multiple redirections on gatsby server side.

Configuration

For the configuration, you have to create a file netlify.toml at the root of your project

The netlify.toml file is your configuration file on how Netlify will build and deploy your site — including redirects, branch and context-specific settings, and much more. Its goal is to describe much of your site configuration via code

We can manage the redirects through the netlify.toml file, the structure of the file should be

[[redirects]]
  from = "the complete url of your blog page with domain like https://example.com/blog/blog-1"
  to = "the complete url of your blog page with domain like https://example.com/blog/blog-2"
  status = 301
  force = false
  query = {path = ":path"} #  apply this rule for /old-path?path=example
  conditions = {Language = ["en","es"], Country = ["US"]}

Here

query is optional if you want to add on same patterns URL then you can use it
conditions is optional if you want to add on same conditions then you can use it

If you want to use the proxy redirection then you can use this structure

[[redirects]]
  from = "/api/*"
  to = "Your proxy url"
  status = 200
  force = true
  conditions = {Role = ["admin", "cms"]}
  [redirects.headers]
    X-From = "Netlify"
    X-Api-Key = "some-api-key-string"

If you want to redirect on multiple URLs then please use the below structure

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-1"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-2"
  status = 301
  force = true

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-11"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-21"
  status = 301
  force = true

[[redirects]]
  from = "the complete URL of your blog page with a domain like https://example.com/blog/blog-12"
  to = "the complete URL of your blog page with a domain like https://example.com/blog/blog-22"
  status = 301
  force = true

Redirects HTTP code

Here is the list of HTTP status codes, that are being used to send from server to the client or browser. The code gives information about the type of response.

You can specify the HTTP status code for any redirect rule but the default is 301.

301 (default): Permanent redirect. Tells the browser(client) that the address for this resource has permanently changed, and any indexes using the old address should start using the new one. The URL in the browser address bar will display the new address.
302: Temporary redirect. Tells the browser(client) that the current address change is temporary. The URL in the browser address bar will display the new address.
404: "Not found". You can use this status code to present custom 404 pages when visitors access paths on your site that don't exist. With this status code, the page content will change, but the URL in the browser address bar will not.
200: "OK". Redirects with this status code will change the server response without changing the URL in the browser address bar. This is used for rewrites and proxying.

With query parameter

If you want to redirect any specific URL like redirects all URL that starts with /store?id=my-blog-post to /blog/my-blog-post with a 301 redirect.

[[redirects]]
  from = "/store?id=my-blog-post"
  to = "/blog/my-blog-post"
  status = 301
  force = false
  query = {id = ":id"} 
  conditions = {Language = ["en","es"], Country = ["US"]}

With Splats

An asterisk indicates a splat that will match anything that follows it.
For eg

[[redirects]]
 from = "/blog/*"
 to = "/news/:splat"
 status = 301
 force = false

This would redirect paths like /blog/2004/01/10/test-1 to /news/2004/01/10/test-1.

With Placeholders

You can use placeholders in the origin and target paths:

[[redirects]]
 from = "/news/:year/:month/:date/:slug"
 to = "/blog/:year/:month/:date/:slug"
 status = 301
 force = false

This would redirect a URL like /news/2004/02/12/my-story to /blog/2004/02/12/my-story.

DEV Community: Akshay

Send notification to slack from the Jenkins CI Job and Jenkinsfile | e Avni Tech

Installation of Slack Notification Plugin

Jenkins CI App installation in Slack

Slack notification plugin configuration in Jenkins

Configuration for project

1. Through the UI panel

2. Send notification through Jenkinsfile file

Conclusion

File upload in angular 12 | e Avni Tech

A complete guide of authentication in angular 11

How the authentication works

a. How to call the backend API

b. How to manage the authentication

c. How auth guard works

Installation Guide of angular App:

Installation of required modules

1. Create the login component

2. Create the API service

3. Create the response interface

5. Create profile component

6. Routing & service implementation

Conclustion

Demo

Login example in angular 11

Authentication in angular 11

Most useful npm command

Below is the list of the most useful npm command.

Authentication in express with JWT token | e Avni Tech

What is JWT token

Implementation of JWT in expressjs

Express server setup

Authenticate with middleware

Conclusion

Loop and iteration in javascript with example

1. Map

2. forEach

3. for

4. while

5. Do while

6. for in

7. for of

What is your favorite JavaScript framework?

How to export CSV file in angular

Installation

Setup

- Add in imports section of the app.module.ts file

- Add the download button

- in your app.component.ts add this or you can replace by it

Demo

Map , reduce & filter

How to add redirects in gatsby with netlify

Configuration

Redirects HTTP code

With query parameter

With Splats

With Placeholders

- Add in imports section of the `app.module.ts file`

- in your `app.component.ts` add this or you can replace by it