Feature Request: Support server-side authentication in AngularFireAuth

[AnthonyNahas]

I am currently developing an angular universal app powered by firebase and angularfire2 (for authentication and database/firestore).
For the server side rendering i am using NodeJS.

I have the following scenario:

There is many routes and many components inside the project! For the following scenario i will consider only 3 routes/components

1- Home Component (authentication is not required)
2- UserProfile Component (Authentication is required)
3- Login Component (used as fallback route to authenticate the user that are trying to access the user profile without to be logged in)!

To make things working with an authentication process within an angular app, we use the "canActivate guard"!

Workflow in the canActivate guard:

• entry point: HomeComponent
• if the user is authenticated, the user will be redirected to the UserProfile component
• otherwise, he will be redirected to the login component.

@Injectable()
export class AuthGuard implements CanActivate {
    constructor(private auth: AuthService, private router: Router) {
    }

    canActivate(next: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean> | boolean {
        return this.auth.user$
            .take(1)
            .map(user => !!user)
            .do(loggedIn => {
                if (!loggedIn) {
                    console.log('access denied');
                    this.router.navigate(['/login']);
                }else{
                this.router.navigate(['/user']); 
               } 
            });
    }
}

this.auth.user$ is equal to

@Injectable()
export class AuthService {

    public user: IUser;
    public user$: Observable<IUser>;
    private _authDialogRef: MatDialogRef<any>;

    constructor(private afAuth: AngularFireAuth,
                private afs: AngularFirestore,
                private _dialog: MatDialog,
                private router: Router) {
        // Get auth data, then get firestore user$ document || null
            this.user$ = this.afAuth.authState

However, client side rendering is working like expected but no the server side!
Since in nodejs the firebase authentication's credentials are not known, the user$ Observable is never fired on the server side (the credentials are located in the local storage of the browser under the key firebase:authUser......).

Angular Universal - SSR - canActivate Result:

when the guard is triggered on the server side, the login page will be rendered and then after few seconds the client side render the whole thing again and will be redirected to the user page.
Than means, by refreshing and rendering every time the user will see first the login page then the user page! This is happening one more time because on the server side are NEVER authenticated..

How can we solve the above described scenario?

Request

Please support firebase authentication on the server side too

Note (ideas): supporting firebase authentication for angular universal app through JWT - headers / cookies ????

[hiepxanh]

I have the same problem, looking for solution of this scenario :) if we can fix this, it will be completed eco system for angular with minimum cost. what about angular state transfer ?

[patrickmichalina]

While not an official solution, I have used dependency injection + firebase admin to work on server side

See:

https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/src/server/server.angular.module.ts#L92

https://github.com/patrickmichalina/fusebox-angular-universal-starter/blob/master/src/client/app/shared/services/auth.service.ts

The idea is, you only need to use the AuthService and it will work on both the server and client via cookies. Not elegant, but it works!

[AnthonyNahas]

1. why did you use cookies strategy instead of headers ?
2. Can you please provide a brief workflow to the ssr authentication (incl. how can the firebase team enhance the authentication module to support server side r