How to implement SSO using an angular 6+ nodejs - node.js

I want to implement Single sign-on, but I don't quite understand how to do it. That's what I have at the moment. In fact, I have no mistakes. It's just that Single Sign-on is not working, in both clients I have to log in both times, although the server is one. I use Angular 6 nodejs (express)
token.interceptor.ts:
import { Injectable } from "#angular/core";
import { AuthService } from "../services/auth.service";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from "#angular/common/http";
import { Observable, throwError } from "rxjs";
import { catchError } from "rxjs/operators";
import { Router } from "#angular/router";
#Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(private auth: AuthService, private router: Router){
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (this.auth.isAuthenticated()) {
req = req.clone({
setHeaders: {
Authorization: this.auth.getToken()
}
})
}
return next.handle(req).pipe(
catchError(
(error: HttpErrorResponse) => this.handleAuthError(error)
)
)
}
private handleAuthError(error: HttpErrorResponse): Observable<any> {
if (error.status === 401) {
this.router.navigate(['/login']), {
queryParams: {
sessionFailed: true
}
}
}
return throwError(error)
}
}
app.component.ts:
import { Component, OnInit } from '#angular/core';
import { AuthService } from './shared/services/auth.service';
#Component({
selector: 'app-root',
template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
constructor(private auth: AuthService) {}
ngOnInit() {
const potentialToken = localStorage.getItem('auth-token')
if (potentialToken !== null) {
this.auth.setToken(potentialToken)
}
}
}
authService:
import { Injectable } from "#angular/core";
import { HttpClient } from "#angular/common/http";
import { Observable } from "rxjs";
import { tap } from "rxjs/operators";
import { User } from "../interfaces";
#Injectable({
providedIn: 'root'
})
export class AuthService {
private token = null;
constructor(private http: HttpClient) {
}
login(user: User): Observable<{token: string}> {
return this.http.post<{token: string}>('/api/auth/login', user)
.pipe(
tap(
({token}) => {
localStorage.setItem('auth-token', token)
this.setToken(token)
}
)
)
}
setToken(token: string) {
this.token = token
}
getToken(): string {
return this.token
}
isAuthenticated(): boolean {
return !!this.token
}
logout() {
this.setToken(null)
localStorage.clear()
}
}

Related

how to get redirected to login page if user is not logged in?(Frontend: Angular7) (Backend: Node Js)

I use two pages with login and crud operations in my project. I need some help. I want to check user login first and redirect to login page if not logged. There are crud operations after the user logs in. Whichever user logs in, only the products added by them will appear. How can I do that? I used node js on backend.
this is login.component.ts
import { Component, OnInit } from '#angular/core';
import { FormBuilder, Validators, FormGroup, FormControl } from '#angular/forms';
import { ActivatedRoute, Router } from '#angular/router';
import { HttpClient } from '#angular/common/http';
import { LoginService } from '../shared/login.service';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
username = new FormControl('');
password = new FormControl('');
constructor(
private http: HttpClient,
private authService: LoginService,
private formBuilder: FormBuilder,
private _router: Router) { }
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', Validators.required],
password: ['', Validators.required]
});
}
get f() { return this.loginForm.controls; }
loginSubmit() {
this.http.post("http://localhost:3000/login", { username: this.username.value, password: this.password.value })
.subscribe(result => {
debugger;
if(result.result){
this._router.navigate(["/payment"]);
// sessionstorage
}else{
alert("Bilgiler yanlış");
}
}, error => {
alert('hata oluştur');
});
}
}
and this is login.service.ts
import { loginDetail } from './login.model';
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders } from "#angular/common/http";
import { Router } from '#angular/router';
#Injectable({
providedIn: 'root'
})
export class LoginService {
//private readonly mockedUser = new SignInData()
isAuthenticated = false;
loginFormData: loginDetail= {
username: null,
password: null,
user_id: null
};
list : loginDetail[];
readonly rootURL = 'http://localhost:5000/api';
readonly rootURLnode = 'http://localhost:3000/';
constructor(private http: HttpClient, private router: Router) { }
login() {
//debugger;
//console.log(this.loginFormData)
this.isAuthenticated = true;
this.router.navigate(['payment-details']);
return this.http.post(this.rootURLnode + 'payment-details', this.loginFormData);
}
}
Use a route guard to check if the user is authenticated or not. Below you can find an example:
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private _authService: AuthService, private _router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
const url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this._authService. isAuthenticated) {
return true;
}
// Store the attempted URL for redirecting
this._authService.redirectUrl = url;
// Navigate to the login page
this.router.navigate(['/login']);
return false;
}
}
You can use it in the routing module like so:
const routes: Routes = [
{
path: '',
loadChildren: () => import('.home/home.module').then((m) => m.HomeModule),
canActivate: [AuthGuard]
}
];
Your login method should be like this:
login() {
return this.http.post(this.rootURLnode + 'payment-details',
this.loginFormData).pipe(
tap(() => {
// you need to do this only for the success case
this.isAuthenticated = true;
this.router.navigate(['payment-details']);
})
}
}
I recommend you to go through the tutorial from the Angular docs https://angular.io/guide/router-tutorial

Interceptor issue in login and logout in angular 8

In my angular application i have used login and logout concept by MEAN(mongo,Express,Angular,Node).
After login within few min if i reload the page automatically going to login page.Token is there but it is redirecting to login page.I do not know why it is happening like this.Below given my code.
auth.guard.ts:
import { Injectable } from '#angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from
'#angular/router';
import { Observable } from 'rxjs';
import { UserService } from "../shared/user.service";
import { Router } from "#angular/router";
#Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor(private userService : UserService,private router : Router){}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if (!this.userService.isLoggedIn()) {
this.router.navigateByUrl('/login');
this.userService.deleteToken();
return false;
}
return true;
}
}
user.service.ts:
getToken() {
return localStorage.getItem('usertoken');
}
setToken(token: string) {
localStorage.setItem('token', token);
}
getToken() {
return localStorage.getItem('token');
}
deleteToken() {
localStorage.removeItem('token');
}
getUserPayload() {
var token = this.getToken();
if (token) {
var userPayload = atob(token.split('.')[1]);
return JSON.parse(userPayload);
}
else
return null;
}
isLoggedIn() {
var userPayload = this.getUserPayload();
if (userPayload)
return userPayload.exp > Date.now() / 1000;
else
return false;
}
After logged within 2 or 3 min if i refresh the page getting err.error.auth is false.Why it is happening like this?
auth.intercepter.ts:
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "#angular/common/http";
import { Injectable } from '#angular/core';
import { tap } from 'rxjs/operators';
import { Router } from "#angular/router";
import { UserService } from "../shared/user.service";
#Injectable()
export class UserAuthInterceptor implements HttpInterceptor {
constructor(private userService : UserService,private router : Router){}
intercept(req: HttpRequest<any>, next: HttpHandler) {
if (req.headers.get('noauth'))
return next.handle(req.clone());
else {
const clonedreq = req.clone({
headers: req.headers.set("Authorization", "Bearer " + this.userService.getToken())
});
return next.handle(clonedreq).pipe(
tap(
event => { },
err => {
if (err.error.auth == false) {
this.router.navigateByUrl('/login'); //After login within 2 or 3 min if i refresh or reload the page this is working.I do not know why this is calling on reload the page
}
})
);
}
}
}

print user name after successful login in angular8 application

i want to display my user name after a successful login. As i am working with the login token and my login logic is separately written and not in my auth file , so i will be including all my required files, for a better understanding
the following is the login component file
export class MyErrorStateMatcher implements ErrorStateMatcher {
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
const isSubmitted = form && form.submitted;
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
}
}
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
mode: ProgressBarMode = 'indeterminate';
value = 50;
bufferValue = 75;
loading:boolean=false;
matcher = new MyErrorStateMatcher();
loginForm = new FormGroup({
email: new FormControl('', [Validators.email, Validators.required ]),
password: new FormControl('', [Validators.required, Validators.min(3) ])
})
get email() { return this.loginForm.get('email'); }
get password() { return this.loginForm.get('password'); }
errorMail = '';
getErrorMessage(emailInput:HTMLInputElement) {
const mail=/^\w+([\.-]?\w+)*#meltwater\.com/;
if(!emailInput.value.match(mail)){
this.errorMail='Email or password are not valid'
}
else{
this.loading=true;
}
}
constructor(
private loginService: LoginService,
private saveUserData:AuthService,
private router: Router,
private cookie:CookieService) { }
userDisplayName = ''
ngOnInit(): void {
}
rememberMe(e){
if(e.target.checked){
this.cookie.set('value',this.loginForm.value);
}
}
onSubmit(event) {
event.preventDefault()
console.log('value',this.loginForm.value)
if(this.errorMail.length === 0) {
this.loginService.login(this.loginForm.value).subscribe((res:any) => {
console.log('login response', res)
if(res.auth.success === true) {
localStorage.setItem('auth', JSON.stringify(res.auth))
this.loginService.loggedIn$.next(res.auth)
this.saveUserData.saveAuthData(res)
sessionStorage.setItem('loggedUser', res.Username);
this.router.navigateByUrl('/search/list')
} else {
this.errorMail='Email or password is not valid'
}
})
}
}
// returnUserName(){
// return this.userDisplayName = sessionStorage.getItem('loggedUser');
// }
}
the following is the login service file
export class LoginService {
constructor(private http: HttpClient) { }
loggedIn$ = new BehaviorSubject(null)
login(creds) {
console.log('creds',creds)
return this.http.post<LoginResponse>('https://backend.url/login', {creds})
}
}
this is my auth service file , probably its not needed i suppose
import { Injectable } from "#angular/core";
import { HttpClient } from "#angular/common/http";
import { Router } from "#angular/router";
import { Subject } from "rxjs";
import { BehaviorSubject } from 'rxjs';
#Injectable({ providedIn: "root" })
export class AuthService {
private isAuthenticated = false;
private token: string;
private email: string;
private authStatusListener = new Subject<boolean>();
constructor(private http: HttpClient, private router: Router) {}
getToken() {
return this.token;
}
getIsAuth() {
return this.isAuthenticated;
}
getAuthStatusListener() {
return this.authStatusListener.asObservable();
}
public saveAuthData(token: string) {
localStorage.setItem("token", token);
}
private clearAuthData() {
localStorage.removeItem("token");
}
logout() {
// this.token = null;
this.clearAuthData();
this.router.navigate(["/"]);
}
autoAuthUser() {
const authInformation = this.getAuthData();
this.token = authInformation.token;
this.isAuthenticated = true;
this.authStatusListener.next(true);
}
private getAuthData() {
const token = localStorage.getItem("token");
if (!token ) {
return;
}
return {
token: token
}
}
userDetails(){
sessionStorage.setItem('loggedUser', .email);
}
}
this is where i want to display my user name : the header
following is the header component
import { AuthService } from './../../auth/auth.service';
import { LoginComponent } from './../../login/login.component';
import { Router } from '#angular/router';
import { Component, OnInit } from '#angular/core';
import { Subscription } from 'rxjs';
#Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
public userIsAuthenticated;
public userName = '';
constructor(public authService: AuthService,public router:Router, public user:LoginComponent) { }
onLogout(){
this.authService.logout();
this.router.navigateByUrl('/');
}
ngOnInit(): void {
this.userName = this.user.returnUserName() ;
}
}
this is throwing me error , probably bcz login component is been imported , i am not so sure about why the error is occuring
You can not inject Component as service, use #ViewChild(LoginComponent) instead, but this will not solve the problem.
To get username try moving that method in AuthService.
Hope it helps.

I am getting multiple calls from angular to the Post API in Node

I am trying to write a file from the data from the database but I'm getting multiple calls from the angular causing multiple entries of the same data.How can I stop that? And also it is causing to override write file after some time.
I am not getting what exactly should I do. I have tried subscribing thing in service in angular but it was of no help.
component.ts
import { Component, OnInit, ViewEncapsulation } from '#angular/core';
import { FormGroup, FormBuilder, Validators } from '#angular/forms';
import { NgbModalRef, NgbModal } from '#ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { CountryService } from './country.service';
import { ConfigService } from '../config.service';
#Component({
selector: 'app-country',
templateUrl: './country.component.html',
styleUrls: ['./country.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: []
})
export class CountryComponent implements OnInit {
public modalRef: NgbModalRef;
public form: FormGroup;
public selectedCountry;
public countries;
constructor(public fb: FormBuilder, public toastrService: ToastrService,
public modalService: NgbModal, public configService: ConfigService,
public countryService: CountryService) {
}
ngOnInit() {
this.form = this.fb.group({
country: [null, Validators.compose([Validators.required])],
});
this.getCountries();
}
public getCountries() {
this.countryService.getCountries((data) => {
this.countries = data.countries;
}, (err) => { });
}
public selectCountry(country) {
this.countryService.selectCountry(country, (resp) => {
}, (err) => { });
}
}
service.ts
import { Injectable } from '#angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '#angular/common/http';
import { ConfigService } from '../config.service';
import { ToastrService } from 'ngx-toastr';
#Injectable({
providedIn: 'root'
})
export class CountryService {
private setHeaders() {
const headers = new HttpHeaders({
'content-type': 'application/json',
});
return headers;
}
constructor(private configService: ConfigService, public http: HttpClient, public toastrService: ToastrService) { }
selectCountry(country: any, callback, errCallback) {
const options = {
headers: this.setHeaders(),
};
this.http.post(this.configService.url + '/selectedCountry', country, options).subscribe((resp: any) => {
callback(resp);
}, err => {
errCallback(err);
});
}
getCountries(callback, errCallback) {
const options = {
headers: this.setHeaders(),
};
this.http.get(this.configService.url + '/countries', options).subscribe((resp: any) => {
callback(resp.msg);
}, err => {
errCallback(err);
});
}
}
I want the call to be sent only once, not twice
Btw. - Please consider adding the NGRX lib in your app.
An angular-service is considered as a data holder. So make there an instance variable.
It could look like:
export class Service{
private countries;
...
public getCountries(){
return this.countries;
}
public loadCountries(){
this.http.get("url").subscribe(countries => this.countries = countries);
}
}
Then in your component class, you just get the countries.
export class Component{
public coutries;
...
public ngOnInit(){
this.countryService.getCountries(countries => this.countries=coutries);
}
}
And last but not least - load the countries in your AppComponent.
export class AppComponent{
...
public ngOnInit(){
this.countryService.loadCountries();
}
}
Need all your code if you can do a stackblitz, and like Mateusz said its better to handle state with ngrx if you dont want to call twice to backend or a simple approach its something like this https://stackblitz.com/edit/angular-biv6cw.
Change your service method like:
add interface:
export interface Country{
id: number;
name: string;
}
Change your method:
getCountries(): Observable<Country> {
return this.httpClient
.get('pass api url here')
.pipe(
map((body: any) => body),
catchError(error => of(error))
);
}
In your component:
ngOnInit() {
this.countryService.getCountries().subscribe(
(result: Countries) => {
this.countries = result;
},
err => {
log.debug('get countries error', err);
}
);
}
}
Try this:
// Somewhere on init
let postRequestCount = 0;
// More stuff …
// Just before doing the POST request inside the `selectCountry` method
if(postRequestCount < 1) {
http.post(); // TODO : Replace with the actual `post` method
}
postRequestCount++;

TypeError: token.split is not a function

I Have get some error while login which is not expected but i try to solve it from 2 days but i cannot. I am using Nodejs for the api and angular 7 for the frontend
i have posted some of the code with the error
please help me to solve this
THANK YOU SO MUCH IN ADVANCE
auth.service.ts
import { Injectable } from "#angular/core";
import { Observable } from "rxjs";
import "rxjs/Rx";
import { JwtHelperService } from "#auth0/angular-jwt";
import "core-js/es7/reflect";
import { HttpClient } from "#angular/common/http";
const jwt = new JwtHelperService();
#Injectable()
export class AuthService {
private decodedToken;
constructor(private http: HttpClient) {}
public register(userData: any): Observable<any> {
return this.http.post("/api/v1/users/register", userData);
}
public login(userData: any): Observable<any> {
return this.http.post("/api/v1/users/auth", userData).map(token => {
//debugger;
return this.saveToken(token);
});
}
private saveToken(token): string {
//debugger;
this.decodedToken = jwt.decodeToken(token);
localStorage.setItem("bwm_auth", token.token);
localStorage.setItem("bwm_meta", JSON.stringify(this.decodedToken));
return token;
}
}
login.component.ts
import { Component, OnInit } from "#angular/core";
import { Router, ActivatedRoute } from "#angular/router";
import { AuthService } from "../shared/auth.service";
import { FormBuilder, FormGroup, Validators } from "#angular/forms";
#Component({
selector: "bwm-login",
templateUrl: "./login.component.html",
styleUrls: ["./login.component.scss"]
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
mistake: any[] = [];
notifyMessage: string = "";
constructor(
private fb: FormBuilder,
private auth: AuthService,
private router: Router,
private route: ActivatedRoute
) {}
ngOnInit() {
this.initForm();
this.route.params.subscribe(params => {
if (params["registered"] == "success") {
//debugger;
this.notifyMessage =
"You have been successfully registered you can login now";
}
});
}
initForm() {
this.loginForm = this.fb.group({
email: [
"",
[
Validators.required,
Validators.pattern(
"^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
)
]
],
password: ["", Validators.required]
});
}
isInvalidForm(fieldName): boolean {
return (
this.loginForm.controls[fieldName].invalid &&
(this.loginForm.controls[fieldName].dirty ||
this.loginForm.controls[fieldName].touched)
);
}
isRequiredForm(fieldName): boolean {
return this.loginForm.controls[fieldName].errors.required;
}
login() {
// debugger;
//console.log(this.loginForm.value);
this.auth.login(this.loginForm.value).subscribe(
token => {
//debugger;
this.router.navigate(["/rentals"]);
},
errorResponse => {
// debugger;
console.log(errorResponse);
// this.mistake = errorResponse.error.errors;
//this.mistake = errorResponse.error;
}
);
}
}
error in browser
TypeError: token.split is not a function
at JwtHelperService.push../node_modules/#auth0/angular-jwt/src/jwthelper.service.js.JwtHelperService.decodeToken (jwthelper.service.js:70)
at AuthService.push../src/app/auth/shared/auth.service.ts.AuthService.saveToken (auth.service.ts:26)
at MapSubscriber.project (auth.service.ts:20)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:35)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)
error in browser
As it seems the token that is returned from server is not string type
public login(userData: any): Observable<any> {
return this.http.post("/api/v1/users/auth", userData).map(token => {
//debugger;
return this.saveToken(token);
});
}
try to check it what is returned from server

Resources