Angular Nativescript router shows incorrect page after login for few seconds


#1

I am working on a native script angular app. when a user logs into the app I authenticate the user from firebase and then check to see if the user has completed the registration process. If not the app navigates the user to the registration page, otherwise it sends the user to the main page.

I find that when a user who has not completed registration logs in the user is taken to the main page momentarily for 1 or 2 seconds and then redirected to the registration page. Any suggestions on why this happening and how I can fix it

( I would like users who have not registered to come directly to the registration page without going to the main page for a few seconds). I am using the nativescript-plugin-firebase for authentication.

My code is as follows:

app.routing.ts

import {LoginComponent} from "./login/login.component"
import { RegistrationComponent } from "./registration/registration.component"
import {MainComponent, MainTabComponent,TabComponent} from          "./shared/maintab/maintab.component"
import {AuthGuard} from "./services/auth-guard.service"

export const AppRoutes:any =[
    { path: "login", component:LoginComponent },
    { path: "registration", component:RegistrationComponent},
    { path:"main", component:MainComponent,canActivate:[AuthGuard],
        children: [
            { path: "tab/0", component: UserFeedExampleComponent },
            { path: "tab/1", component: TabComponent }, 
             { path: "", redirectTo: "tab/0", pathMatch: "full" }
        ]
    },
    { path: "", redirectTo: "login", pathMatch: "full" }   
];

export const AppComponents: any = [
    MainTabComponent,
    MainComponent,
    TabComponent,
     LoginComponent,
    RegistrationComponent
];

login.component.ts

import { Component, OnInit, Input } from "@angular/core";
import { Page } from "ui/page";
import { Router, NavigationExtras } from "@angular/router";
import { RouterExtensions } from 'nativescript-angular/router/router-extensions';
import firebase = require("nativescript-plugin-firebase");
import { FirebaseAuthService } from '../services/firebase-auth.service';
import { User } from '../models/user.model';


@Component({
    moduleId: module.id,
    selector: "app-login",
    templateUrl: "./login.component.html",
    // changeDetection: ChangeDetectionStrategy.OnPush
})

export class LoginComponent {
    user: User;
    isLoggingIn = true;
    isRegistering = false;
    isAuthenticating = false;
    firstname: string;
    lastname: string;


    constructor(private firebaseAuthService: FirebaseAuthService,
        private routerExtensions: RouterExtensions,
        private router: Router,
        private page: Page
    ) {
        page.actionBarHidden = true;
        this.user = new User("", "");
        this.firstname = "";
        this.lastname = "";
    }


    submit() {
        this.isAuthenticating = true;
        if (!this.isLoggingIn && !this.isRegistering) {
            this.login();
        } else {
            this.signUp();
        }
    }

    login() {
        this.firebaseAuthService.login(this.user)
            .then(() => {
                this.isAuthenticating = false;
                this.checkUserRegistration(this.user);
            })
            .catch((message: any) => {
                this.isAuthenticating = false;
            });
    }

    public onGoogleLoginTap() {
        var self = this;
        firebase.login({
            type: firebase.LoginType.GOOGLE
        }).then((result) => {

            self.saveUsertoDatabase();
            self.checkUserRegistration(result);

        }),
            function (errorMessage) {
                console.log(errorMessage);
            }
        console.log("login with google");
    };

    saveUsertoDatabase() {
        var self = this;
        firebase.getCurrentUser().then((user) => {
            firebase.update('/trial/' + user.uid, {
                email: user.email
            }).then(
                function (result) {
                    console.log("User uid: " + user.uid + "User email: " + user.email);
                }
                );
        }, (error) => {
            alert("Unable to get User: " + error);
        });
    }

    checkUserRegistration(result) {
        var self = this;
        var onQueryEvent = function (result) {
            if (!result.error) {
                if (!result.hasOwnProperty('registrationComplete')) {
                    self.goToRegistrationPage(self.user);
                }
                else {
                    self.gotoFeedPage();
                }
            }
        };

        firebase.query(
            onQueryEvent,
            ("/trial/" + result.uid),
            {
                singleEvent: true,
                orderBy: {
                    type: firebase.QueryOrderByType.CHILD,
                    value: 'registrationComplete'
                },
            }
        );
    }


    goToRegistrationPage(user) {
        let navigationExtras: NavigationExtras = {
            queryParams: {
                registeredUser: JSON.stringify({ user })
            }
        };
        console.log("selected user is " + JSON.stringify({ user }));
        this.router.navigate(["registration"], navigationExtras);
    }

    gotoFeedPage() {
        this.routerExtensions.navigate(["/main/tab/0"], { clearHistory: true });
    }

    logout() {
        this.firebaseAuthService.logout();
        console.log("Logged out")
        this.routerExtensions.navigate(["/login"], { clearHistory: true });
    }
}

Other details about the platform are as follows:

tns 2.5.0 angular-cli: 1.0.0-beta.18 node: 6.9.5 os: win32 x64