// server/routes router.post('/auth/login', function (req, res) {   // if id does not exist create user, else update user   const payload = req.body;   const token = payload.token;   // we need to first verify token   sdk.auth().verifyIdToken(token).then(function (decodedToken) {     // then find user by id     const id = decodedToken.uid;     // find profile in db, example     const profile = {...};      // if user does not exist, create one     if (!profile) {       // save new user to db then return       // we don't have bloodType just yet       const _newuser = {         id: decodedToken.uid,         picture: decodedToken.picture,         // use the decodeToken for now         email: decodedToken.email,         // some hard coded attributes         admin: true,         // this flag is important         newUser: true};       // save _newuser in db here, then return       // ...       res.json(_newuser);     } else {       // return existing user with full profile, including bloodtype       // watch out for client-side gap, bloodType may still not exist       res.json(profile);     }    }).catch(function (error) {     // 401   }); });  // update logged in user router.patch('/user', function(req, res) {   // get from middleware   const user = res.locals.user;    if (user) {     // update user in db with body     const payload = req.body;     let profile = {...user};     profile.bloodType = payload.bloodType;     // switch off newUser     profile.newUser = false;     // save to db     // ...     // update locals     res.locals.user = profile;      // return profile     res.json(profile);   } else {      res.status(401).json({       message: 'Access denied',       code: 'ACCESS_DENIED'     });   } }); 

// services/auth.service // login changed, we'll map to IAuthInfo later Login(email: string, password: string): Observable<IAuthInfo> {   const res = () => signInWithEmailAndPassword(this.auth, email, password);   return defer(res).pipe(     // get the token to force a fresh one     switchMap(auth => auth.user.getIdToken()),     // login user in our API     switchMap(token => this.LoginUser(token))   ); }  LoginUser(token: string): Observable<IAuthInfo> {   return this.http.post('/auth/login', { token });   // we need to later save into state } 

// services/auth.service // sign up changed SingUp(email: string, password: string, custom: any): Observable<IAuthInfo> {   // here send a sign up request, with extra params   const res = () =>     createUserWithEmailAndPassword(this.auth, email, password);    return defer(res).pipe(     // first new token     switchMap(auth => auth.user.getIdToken()),     // log user in and request extra information     switchMap(token => this.LoginUser(token)),     // then patch     switchMap(_ => this.UpdateUser(custom)   ); }  UpdateUser(custom: any): Observable<IAuthInfo> {   return this.http.patch('/user', custom).pipe(     // we need to update state again here   ); } 

// serivces/auth.service  // Login by Google initially: LoginGoogle(): Observable<IAuthInfo> {   const provider = new GoogleAuthProvider();   const res = () => signInWithPopup(this.auth, provider);    return defer(res).pipe(     switchMap(auth => auth.user.getIdToken()),     // call our API and check for uid     switchMap(token => this.LoginUser(token))   ); } 

// components/public/login.component  // login with Google loginGoogle() {   this.authService.LoginGoogle()   .subscribe({     next: (user) => {       // read newUser from our API       if (!user.newUser) {         this.router.navigateByUrl('/private/dashboard');       } else {         // show the sign up field (somehow)         this.showMeForm = true;       }     },   }); } // finish sign up by google update() {   // grab form bloodType, example: B+   this.authService.UpdateUser({ bloodType: 'B+' }).subscribe({     next: (user) => this.router.navigateByUrl('/private/dashboard');   }); } 

 // serivces/auth.service LoginGoogle(): Observable<IAuthInfo> {   const provider = new GoogleAuthProvider();   provider.addScope('email');   // ... } 

// services/auth.service // catch email in google, and send it to API LoginGoogle(): Observable<IAuthInfo> {  //...    return defer(res).pipe(       switchMap(auth => auth.user.getIdToken()),             // login with provider email       switchMap(token => this.LoginUser(token, this.auth.currentUser.providerData[0].email))   ); } // catch email and send to API LoginUser(token: string, email?: string): Observable<IAuthInfo> {     return this.http.post('/auth/login', { token, email }); } 

// in server/routes.js router.post('/auth/login', function (req, res) {    const payload = req.body;   const token = payload.token;    sdk.auth().verifyIdToken(token).then(function (decodedToken) {     //...     if (!profile) {       // ...       // read email from payload instead of decodedToken       const _newuser = {         email: payload.email         // ...       }        // ...       res.json(_newuser);     }     //...   }) }); 

// components/public/login.component // change to login to allow sign up login() {   this.authService     .Login('email@address.com', 'valid_firebase_password')     .pipe(catchError...)       .subscribe({       next: (user) => {         // read newUser from our API         if (!user.newUser) {           this.router.navigateByUrl('/private/dashboard');         } else {           // show the sign up field           this.showMe = true;         }       },    }); } 

// services/auth.service // Login first Login(email: string, password: string): Observable<IAuthInfo> {   const res = () => signInWithEmailAndPassword(this.auth, email, password);   return defer(res).pipe(     switchMap(auth => auth.user.getIdToken()),     // send email     switchMap(token => this.LoginUser(token, email)),     catchError(err => {       // catch invalid credentials to sign up       if (err.code === 'auth/invalid-credential') {         return this.SingUp(email, password);       }       // throw everything else       return throwError(() => err);     })   ); } // remove custom attributes SingUp(email: string, password: string): Observable<IAuthInfo> {   const res = () =>     createUserWithEmailAndPassword(this.auth, email, password);   return defer(res).pipe(     switchMap(auth => auth.user.getIdToken()),     // stop here and return, send email as well     switchMap(token => this.LoginUser(token, email)),   ); } 

// server/auth.middleware.js // update to find profile by uid first sdk.auth().verifyIdToken(authheader).then(function (decodedToken) {   // example:   let profile = profiles.find((profile) => profile.id === decodedToken.uid);   // if found, set, else nullify   if (profile){     res.locals.user = profile;   } else {     res.locals.user = null;   }   // next   next(); }) // ... 

// components/some component // template `<div *ngIf="status$ | async as s">   {{ s.email }} {{ s.bloodType }} </div>`  status$: Observable<IAuthInfo>; constructor(private authState: AuthState) {} ngOnInit(): void {   // watch auth state item   this.status$ = this.authState.stateItem$; } 

// services/auth.model export interface IAuthInfo {   id: string;   bloodType?: string;   admin?: boolean;   // some properties from firebase   picture?: string;   email?: string;   // a place for the token   token?: string;   // a boolean for newUser   newUser?: boolean; }  export const MapAuth = (auth: any): IAuthInfo => {   // map incoming from db with our user   // this isn't required, but preferable   // token is not mapped here   return {     id: auth.id,     email: auth.email,     admin: auth.admin,     bloodType: auth.bloodType,     picture: auth.picture,     newUser: auth.newUser   } } 

// services/auth.service // update state after API calls LoginUser(token: string, email?: any): Observable<IAuthInfo> {   return this.http.post('/auth/login', { token, email }).pipe(     map((auth: any) => {       // map and save user in localstorage here, including token       const _user = MapAuth(auth);       this.authState.UpdateState({ ..._user, token });       return _user;     }),   ); } UpdateUser(custom: any): Observable<IAuthInfo> {   return this.http.patch('/user', custom).pipe(     map(auth => {       // now update localstorage again       const _user = MapAuth(auth);       this.authState.UpdateState({..._user});       return _user;       })   ); } 

@Injectable({ providedIn: 'root' }) export class AuthState {   // create an internal subject and an observable to keep track   private stateItem: BehaviorSubject<IAuthInfo | null> = new BehaviorSubject(null);   stateItem$: Observable<IAuthInfo | null> = this.stateItem.asObservable();   constructor(     // inject from '@angular/fire/auth'     private auth: Auth   )   {     // TODO: initiate state   }    UpdateState(item: Partial<IAuthInfo>): Observable<IAuthInfo> {     // update existing state     const newItem = { ...this.stateItem.getValue(), ...item };     this.stateItem.next(newItem);     // save into a key in localStorage     localStorage.setItem('user', JSON.stringify(newItem));     // return observable     return this.stateItem$;   }    GetToken() {     // return token as is     const _auth = this.stateItem.getValue();     return _auth?.token || null;   }   RefreshToken() {     // refresh by calling getIdToken with `true`     return defer(() =>        this.auth.currentUser.getIdToken(true)).pipe(       switchMap(token => {         // update state then return an observable to pipe to         return this.UpdateState({ token });       })     );   } } 

// services/auth.guard  export const AuthCanActivate: CanActivateFn = (...): Observable<boolean> => {   // inject our auth state   const auth = inject(AuthState);   const router = inject(Router);    const role = route.data.role;    // watch user   return auth.stateItem$.pipe(     map(_user => {      // if user exists let them in, else redirect to login       if (!_user) {         router.navigateByUrl('/public/login');         return false;       }        // user exists, match property to route data       if (!_user.hasOwnProperty(role)) {         router.navigateByUrl('/public/login');         return false;       }       return true;     })   ); }; 

// services/auth.state  constructor(...) {   // initialize state directly from localStorage     const _localuser: IAuthInfo = JSON.parse(localStorage.getItem('user'));   if (_localuser) {     this.UpdateState(_localuser);   } } 

// services/auth.state  constructor(...) {   // .. update localStorage first   // take just 1, this will only get a new one if it's expired   idToken(this.auth).pipe(     take(1),   ).subscribe({     next: (token) => {       if (token) {         this.UpdateState({ token });       }     }   }); } 

// example of a tighter security call GetSafeCodes(): Observable<something> {   // first get token with force flag   return defer(() => this.auth.currentUser.getIdToken(true)).pipe(     switchMap(token => {       // then call API if token exists       return this.GetCodes();     }),     catchError(...)   ); } 

// services/auth.state Logout() {   this.stateItem.next(null);   localStorage.removeItem('user'); }