Below is the code snippet from my auth.service.ts file:
import { Injectable } from "@angular/core";
import { GoogleAuthProvider } from 'firebase/auth';
import { AngularFireAuth } from '@angular/fire/compat/auth';
import { Observable } from "rxjs/internal/Observable";
import firebase from 'firebase/compat/app';
import { ActivatedRoute, Router, RouterLink, RouterStateSnapshot } from "@angular/router";
@Injectable({ providedIn: 'root' })
export class AuthService {
user$: Observable<firebase.User|null>;
constructor(private afAuth:AngularFireAuth, private router:Router,private route: ActivatedRoute) {
this.user$ = afAuth.authState;
}
login() {
let returnUrl = this.route.snapshot.queryParamMap.get('returnUrl') || '/';
localStorage.setItem('returnUrl',returnUrl);
this.afAuth.signInWithRedirect(new GoogleAuthProvider());
}
logout(){
this.afAuth.signOut();
}
}
Next, we have a snippet from my app.component.ts file:
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor(private auth : AuthService, router:Router){
auth.user$.subscribe(user=>{
if(user){
let returnUrl = localStorage.getItem('returnUrl');
router.navigateByUrl(returnUrl)
}
});
}
}
An issue is arising with the router.navigateByUrl(returnUrl) line in app.component.ts. The error message states:
Argument of type 'string | null' is not assignable to parameter of type 'string | UrlTree'.
Type 'null' is not assignable to type 'string | UrlTree'.
I am currently unsure how to resolve this error.