app
 |---Auth
       |---- auth.component.ts [logic]
       |---- auth.component.html [templet]

import { Component } from "@angular/core";

@Component({
    selector: 'app-auth',
    templateUrl: './auth.component.html',
})
export class AuthComponent{
}

@NgModule({
    declarations: [ AuthComponent ]
})

const appRoutes: Routes = [
    {path: 'auth', component: AuthComponent}
    ]

export class AuthComponent{
    isLoginMode = true;		// mode property
    onSwitchMode(){			// method which can change the mode property
        this.isLoginMode = !this.isLoginMode;
    }
}

onSubmit(form: NgForm){
        console.log(form.value);	// logging the obtained form values
        form.reset();			   // resetting the form 
}

@Injectable({
    providedIn: 'root'
})
export class AuthService{
    // following url is signup url and api key is obtained from project setting
    private signUpURL = "link obtained from firebase auth api signup + API key of project"
    
    constructor(private http : HttpClient){
    }
    
    signUp(email:string, password:string){
    }

// this method returns the observable
signUp(email:string, password:string){
      return this.http.post(this.signUpURL,
              {email:email, 			
              password:password,
              returnSecureToken:true
              })
}
// firebase api needs email, password and returnsSecureToken with signup request
// email and password will be obtained as the method parameters
// subscription to the post request will be done in the method which calls this method

// firebase gives following object as the response for signup post request
// can be found in the firebase api doc 
interface AuthResponseData {
    idToken : string;
    email : string;
    refreshToken : string;
    expiresIn : string;
    localId : string;
}

@Injectable({ providedIn: 'root' })
export class AuthService{ 
}

// <AuthResponseData> included in the post method
// by default post request is generic
// by adding <AuthResponseData> we are specifying the response of the post request
signUp(email:string, password:string){
    return this.http.post<AuthResponseData>(this.signUpURL,
            {email:email, 
            password:password,
            returnSecureToken:true
            })
}

export class AuthComponent{
    constructor(private authSer:AuthService){}
}

 onSubmit(form: NgForm){
        const email = form.value.email;
        const password = form.value.password;
 }

 onSubmit(form: NgForm){
        const email = form.value.email;
        const password = form.value.password;
   
     	if (this.isLoginMode) {
    		// signin logic
        } 
     	else {
        // sign up logic implemented in next point
        }
 }	

// following code will be reside in else section of above point
this.authSer.signUp(email, password).subscribe(
           responseData => {				// response of the request obtained as an arrow func
                console.log(responseData);	 // logging the obtained responseData
           },
           error => {					   // error response obtain through arrow function
                console.log(error);			// logging the obtained error response
           }
 );

shared
   |---- loading-spinner
			   |-------- loading-spinner.css
			   |-------- loading-spinner.ts

import { Component } from "@angular/core";

@Component({
    selector: 'app-loading-spinner',
    template: '<div class="lds-facebook"><div></div><div></div><div></div></div>',
    styleUrls: ['./loading-spinner.css']  
})
export class LoadingSpinnerComponent{}

export class AuthComponent{
    isLoading = false;
    
    onSubmit(form: NgForm){
        const email = form.value.email;
        const password = form.value.password;
        this.isLoading = true;		// loading started
        if (this.isLoginMode) { // signin logic
        } else { // sign up logic
            this.authSer.signUp(email, password).subscribe(
                responseData => {
                    console.log(responseData);
                    this.isLoading = false;	// loading ends 
                },
                error => {
                    console.log(error);
                    this.isLoading = false;	// loading ends
                }
            );
        }
   		form.reset();
    }
}

export class AuthComponent{
	error : string = null;
}

// pipe rxjs operator is applied to the post request of signup method
.pipe(catchError(
    errorRes => {
     		let errorMessage = 'An unknown error occured';	// default error message
    
      		if(!errorRes.error || !errorRes.error.error){
              		return throwError(errorMessage);	   // if unknown error occures throw this
      		}
       		switch (errorRes.error.error.message){
              		case 'EMAIL_EXISTS': 				  // if this error occures
              			errorMessage = 'This email exists already'	// change the errorMessage
       		}
    
        	return throwError(errorMessage);		// throw error here if known error occured
	}
));

this.authSer.signUp(email, password).subscribe(
         responseData => {
               console.log(responseData);
               this.isLoading = false;
         },
         errorMessage => {
             // assign errorMessage to the previously declared error property
               this.error = errorMessage;	
               this.isLoading = false;
         }
);

// only prepare the post observable but no subscribe here return the observable
// post request needs email password and returnSecureToken as data
login(email:string, password:string){   
    return this.http.post<AuthResponseData>(this.loginURL,
                {email:email,
                password:password,
                returnSecureToken: true   
                });
}

// registered property is yield by Signin request but
// this property is not yield by Signup request 
// check firebase API doc for list of properties in response data
interface AuthResponseData {
    idToken : string;
    email : string;
    refreshToken : string;
    expiresIn : string;
    localId : string;
    registered? : Boolean	// optional property
}

// make it export
export interface AuthResponseData {}

// import the Authresponse data from auth.service.ts
import { AuthService, AuthResponseData } from "./auth.service";

// create the observable variable as follow
let authObservable : Observable<AuthResponseData>;

// subscribe to this observable in onSubmit method outside if else block
onSubmit(form: NgForm){
        const email = form.value.email;
        const password = form.value.password;
    
        // following variable will hold the observable
        let authObservable : Observable<AuthResponseData>;
        this.isLoading = true;

        if (this.isLoginMode) {
            // signin logic
            // assigning the login observable to the authObservable variable
            authObservable = this.authSer.login(email, password);
        } else {
            // sign up logic
            // assigning signup observable to the authObservable variable
            authObservable = this.authSer.signUp(email, password);
        }
    
		// execute the authObservable here after
    	// appropreate assignment of observable
        authObservable.subscribe(
            responseData => {
                console.log(responseData);
                this.isLoading = false;
            },
            errorMessage => {
                this.error = errorMessage;
                this.isLoading = false;
            }
        );
        form.reset();
}

private handleError(errorResponse : HttpErrorResponse){
    
    // errorMessage property will hold the error message obtained from request
    let errorMessage = 'An unknown error occured';	// default message
    
    // check if errorResponse is empty?
    if(!errorResponse.error || !errorResponse.error.error){
            return throwError(errorMessage);	// then send the default error message
        }
    
    // if errorResponse is not empty then go to the switch case
    switch (errorResponse.error.error.message){
            // sign up related errors
                case 'EMAIL_EXISTS': 	// if errorResponse is this then
                errorMessage = 'This email exists already'; // put this value in errorMessage
                break;
            
            	case 'TOO_MANY_ATTEMPTS_TRY_LATER':	
                errorMessage = 'Too many attempts try again later'; 
                break;
            
    		// sign in related errors   
                case 'INVALID_PASSWORD':
                errorMessage = 'Invalid Password';
                break;
            
                case 'EMAIL_NOT_FOUND':
                errorMessage = 'This email does not found';
                break;
    }
    return throwError(errorMessage); // throw error message before leaving this method
}

signUp(email:string, password:string){
        return this.http.post<AuthResponseData>(this.signUpURL...)
                .pipe(catchError(this.handleError));	// calling the handleError method
    }

login(email:string, password:string){ 
        return this.http.post<AuthResponseData>(this.loginURL...)
                .pipe(catchError(this.handleError));	// calling the handleError method
    }

// this error eventually will end in authObservable subscription block of auth.component.ts

// constructor automatically create the instance of property and assign it to it 
export class User {
    constructor(public email:string, 
        public id : string, 
        private _token: string, 
        private _tokenExpirationDate : Date){} 
}

get token(){
    	// if token expired then return null
        if(!this._tokenExpirationDate || new Date() > this._tokenExpirationDate){
            return null;
        }
    	// or return the token 
        return this._token;
    }    

userx = new Subject<User>();

private userAuthentication(email:string, userId:string, token: string, expiresIn: number){
      const expirationDate = new Date(
            new Date().getTime() + expiresIn * 1000);

      const user = new User(email, 
                              userId,
                              token,
                              expirationDate);

      this.user.next(user);
}

// we can tap the response data from post request inside pipe
// to create the user object userAuthentication method is used
signUp(email:string, password:string){
     return this.http.post<AuthResponseData>(this.signUpURL...)
    		.pipe(
         		catchError(this.handleError)
         		,tap( resData => {
                        this.userAuthentication(resData.email, resData.localId, 									  resData.idToken, +resData.expiresIn);
                	}
              ));       
}
                 
login(email:string, password:string){   // only prepare the observable but no subscribe here
       return this.http.post<AuthResponseData>(this.loginURL...)
              .pipe(
         		catchError(this.handleError)
                 ,tap( resData => {
                         this.userAuthentication(resData.email, resData.localId, 
                         resData.idToken, +resData.expiresIn);
                     }
               ));
    }                     

    constructor(private authSer:AuthService, 
                	private router:Router){}

// perform this task in authObservable's subscribe method
 onSubmit(form: NgForm){
     ...
     authObservable.subscribe(
        responseData => {
            console.log(responseData);
            this.isLoading = false;
            this.router.navigate(['/recipes']);	// navigate to the recipe component
        },
        errorMessage => {
            this.error = errorMessage;
            console.log(errorMessage);
            this.isLoading = false;
            }
        );
 }

// this property will be used in html to control the header
isAuthenticated = false;

constructor(private remote:DataStorageService, 
                private authService : AuthService){
    }

private userSub : Subscription; // a property which holds the subscription

ngOnInit(){
    this.userSub = this.authService.user.subscribe(
        user => {
            // is authenticated = true if we receive user object from subscription
            // is authenticated = false if we dont receive user object[null] from subscription 
            this.isAuthenticated = !user ? false :true;
        }
    );
}

ngOnDestroy(){
    this.userSub.unsubscribe();
}

constructor(private http: HttpClient, 
        private authService : AuthService){
    }

// we can now user event after it got emitted [at any time]
user = new BehaviorSubject<User>(null);

fetchRecipes(){
    return this.authService.user.pipe(take(1),
                exhaustMap(user => { // it will subscribe the user get the data and unsubscribe it
                    return this.http
                        .get<Recipe[]>(this.remoteUrl,
                            {
                                params: new HttpParams().set('auth', user.token)
                            }
                            );
                })
                ,map(recipes =>{               
                    return recipes.map(recipe => {
                        return {...recipe, ingredients: recipe.ingredients ? recipe.ingredients:[]
                        };
                    });           
                })
                ,tap(recipes => {
                    this.recipeService.setRecipes(recipes);
                 })
    )
}

@Injectable()
export class AuthIntercepterService implements HttpInterceptor{
     constructor(private authService: AuthService){} // injecting authService dependency
    
    // every class which implements HttpInterceptor must have following method  in it
    intercept(){}
}

// param1 : HttpRequest [req]
// param2 : Httphandler [next]
intercept(req:HttpRequest<any>, next: HttpHandler){
    // will return the modified request 
    // this modified request will have user credentials 
    // idea is to authenticate the user before peroforming any post or get req.
}

intercept(req:HttpRequest<any>, next: HttpHandler){
     return this.authService.user.pipe(take(1),
     exhaustMap(user => {
         // if there is no user then 
         // simply return the req. obtained from paramter of this intercept method1
          if(!user){
              return next.handle(req);
          }
         // make the clone of inputed req. 
         // then add the Http authentication param to that cloned req. 
          const modifiedReq = req.clone({
              params: new HttpParams().set('auth',user.token)
          });
         // return the modified request which has actual req. as well as user auth
          return next.handle(modifiedReq);
      }));
}

@NgModule({
    providers: [{
        provide: HTTP_INTERCEPTORS,
        useClass: AuthIntercepterService,
        multi: true
    }]
})

fetchRecipes(){
    return this.http.get<Recipe[]>(this.remoteUrl).pipe(
        map(recipes =>{               // this is rxjs map operator
            return recipes.map(recipe => {
                  return {...recipe, ingredients: recipe.ingredients ? recipe.ingredients:[]};
                        }
                   );           // this map is javascript array method
            }
        )
        ,tap(recipes => {
                 this.recipeService.setRecipes(recipes);
               }
         )
     )
}
// storeRecipes() will remain same we are just itroducing the itercept so previously modified 
// fetch method will be remodified

logout(){
   this.user.next(null);   // make the user object null
}
// user object is situated in the same service

onLogout(){
   this.authService.logout();
}

// redirection will be performed in logout() of the auth.service.ts 
// because logout will be performed from different locations
logout(){
     this.user.next(null);   // make the user object null
     this.router.navigate(['/auth']);
}

// this method is already implemented in previous sections
private userAuthentication(){
    localStorage.setItem('userData', JSON.stringify(user));
}
// convert the user object into plain text using JSON.stringify() method

autoLogin(){
    // obtain the user data from local storage
    const userData:{
            email:string;
            id:string;
            _token:string;
            _tokenExpirationDate:string;
    } = JSON.parse(localStorage.getItem('userData')); 
    // JSON.parse will converte text into object
    // userData will hold the user which is stored in the local storage
    
    // if there is no user data available in local storage
    // then dont perform autoLogin
    if(!userData){
        return;
    } 
    
    // create the object of user which is already in local storage
    const LoadedUser  = new User(userData.email, 
                                 userData.id, 
                                 userData._token, 
                                 new Date(userData._tokenExpirationDate)
    );
    
    // check if loaded user has valid token
    // if yes then publish loaded user over the user subject
    // user subject is implemented in the same service
    if(LoadedUser.token){
          this.user.next(LoadedUser);  
    }
}

export class AppComponent implements OnInit {
  	constructor(private authSer: AuthService){}
  	ngOnInit(){
      this.authSer.autoLogin();
  	}
}

logout(){
    // clear the user data locally stored
    localStorage.removeItem('userData');
    
    // follow section 7 for this
     if(this.tokenExpirationTimer){
            clearTimeout(this.tokenExpirationTimer);
        }
        this.tokenExpirationTimer = null;
}

// create the timer expiration property 
// this property will be used to check whether token timeout happened or not
private tokenExpirationTimer: any;

// in autoLogout() we will set the above declared timer 
// and once that timer expires perform logout method
autoLogout(expirationDuration : number){
      this.tokenExpirationTimer = setTimeout(() =>{
            							this.logout();	
        									},expirationDuration);
}

 private userAuthentication(......expiresIn: number){
     this.user.next(user);
     this.autoLogout(expiresIn*1000);	// autologout in [expiresIn*1000] duration
     localStorage.setItem('userData', JSON.stringify(user));
 }

 autoLogin(){
     if(LoadedUser.token){
      this.user.next(LoadedUser);  
      const expirationDuration = new Date(userData._tokenExpirationDate)
      							  .getTime() - new Date().getTime();
      this.autoLogout(expirationDuration);
      }
 }

// basically when we calls autoLogout method, we are just setting the timer and when this timer overflow logout method is called 
// the value for timer is passed as a parameter to the autologin method

@Injectable({
    providedIn: 'root'})
export class AuthGuard implements CanActivate {
    // import authService and Router
    constructor(private authService: AuthService,
    private router: Router) { }
    
   //canActivate method
}

canActivate(route: ActivatedRouteSnapshot, router: RouterStateSnapshot):
// following things can be returned
     | boolean
     | UrlTree
     | Promise<boolean | UrlTree>
     | Observable<boolean | UrlTree> {
     return this.authService.user.pipe(take(1),map(user => {
         const isAuth = !!user;	
         if (isAuth) {
            return true;
         }
         return this.router.createUrlTree(['/auth']);
     }));
}

const appRoutes: Routes =  [
    {   path: 'recipes', component: RecipesComponent, 
        canActivate: [AuthGuard],
        children: [...]
    }    
]