Logging in using angular 4 and PHP-JWT tokens

Question

I am creating my first web app after a long course in Angular 4. I am using wamp server as my back end database and the JWT instead of the sessions.

I started by creating the login form using Reactive forms:

<div class="row">
    <div class="col-md-4 col-md-offset-4 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4">
        <div class="card">
            <div class="card-header">
                Login
            </div>
            <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
                <div class="card-block">
                    <h4 class="card-title">Username</h4>
                    <input type="text" class="form-control" formControlName="username" name="username" id="username" ngModel required>
                    <h4 class="card-title">Password</h4>
                    <input type="password" class="form-control" formControlName="password" id="password" name="password" ngModel required>
                    <button type="submit" class="btn btn-primary">Login</button>
                </div>
            </form>
        </div>  
    </div>
</div>

And here the .ts script:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

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

  //Creating a form group
  loginForm: FormGroup;


  constructor() { }

  ngOnInit() {
    this.initForm();
  }

  //Initializing the form
  private initForm()
  {
    let userName='';
    let passWord='';

    this.loginForm = new FormGroup({
        'username': new FormControl(userName, Validators.required),
        'password': new FormControl(passWord, Validators.required)
    });
  }

  //OnSubmit
  onSubmit(){

    //console.log(this.loginForm.value.username);
    let user = '';
    let pass = '';

    user = this.loginForm.value.username;
    pass = this.loginForm.value.password;
    console.log(user);

    //http service call
    //...
  }
}

Then I created a service to login into the database and check the credentials and if it is correct, I want to redirect to the /index component:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map'

@Injectable()
export class LoggingService {

  constructor(private http: Http) { }
  logIn(user: string, pass: string)
  {
    return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass}))
        .map((response: Response)=> {
            //...
        });
  }
}

Actually I am stuck now at this step:

.map((response: Response)=> {
                //...
});

What to do here, I can't even remember if we took it in the course. And can't know how the login.php should be like.

Emerceen · Accepted Answer · 2017-05-16 12:43:44Z

2

In service:

return this.http.post('localhost/iamp/login.php', JSON.stringify({user: user, pass: pass}))
    .map((response: Response)=> {
        response.json()
    });

In component:

import { Router, ActivatedRoute } from '@angular/router';

// ...
constructor(
  private loginService: LoginService
  private router: Router
) { }
// ...

authenticateUser(login: string, password: string): void {
this.loginService.logIn(login, password).subscribe(user => {
    localStorage.setItem('user', user);
    this.router.navigateByUrl('index');
  }
}

answered May 16, 2017 at 12:43

Emerceen

2,8853 gold badges19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lara Ch Over a year ago

Is it safe to work with local storage or I should stick to jwt token ?

Emerceen Over a year ago

@LaraCh Work with local storage is vulnerable to XSS, cookies to CSRF. When Your app will be made with safety standards, method for store JWT token is free.

Lara Ch Over a year ago

So JWT is the best way from the begining

Collectives™ on Stack Overflow

Logging in using angular 4 and PHP-JWT tokens

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related