Handling a logout in nativescript with angular on both android and iOS

Question

I am new to both NativeScript and Angular so I appreciate any assistance/guidance. I am running Angular 8.2.14 and nativescript 6.2.2.

I am working on an app for iOS and Android that essentially provides a curated task list and some other basic info once a user logs in.

When the app launches the user is presented with a login component. Once the user is authenticated the username, a token, and an expiration timestamp are saved using the nativescript-secure-storage plugin. I am storing the username and token so that the next time the user launches the app they don't have to sign in again.

The user then gets routed to a dashboard via this.router.navigateByUrl("/dashboard");.

I followed the example in the nativescript documentation to replace the 'back' navigation button in the action bar on the dashboard with a Log Out button that calls a function. This works perfectly in iOS. The user taps on the log out button and I clear the username and secure token that are stored in secure storage.

The problem is that in Android the user has a back button and also the <actionItem> tag doesn't actually appear in the action bar.

The essence of the LoginComponent is:

export class LoginComponent implements OnInit {
    secureStorage = new SecureStorage();
    constructor(private router: Router, private userService: UserService) {
        this.user = new User();
    }
    ngOnInit() {
        // Check to see if user has a saved session
        var sessionUser = this.userService.checkSavedSession();
        if (sessionUser.expires > now) {
            this.router.navigateByUrl("/dashboard");
        }
    }
    login() {
        // Called when user taps submit on login view
        this.userService.login(this.user)
            .subscribe(
                // If user authed store the session
                this.secureStorage.set({
                    key: "appSession",
                    value: JSON.stringify({
                        uid: resp.uid,
                        expires: resp.exp,
                        token: resp.token
                    })
                });
                // Go to the dashboard
                this.router.navigateByUrl("/dashboard");
            );
    }
}

The dashboard view:

<ActionBar title="Dashboard" class="action-bar">
    <navigationButton text="Log Out" ios:visibility="collapsed" (tap)="logout()"></navigationButton>
    <actionItem text="Log Out" android:visibility="collapsed" (tap)="logout()"></actionItem>
</ActionBar>
<AbsoluteLayout><!-- View content --></AbsoluteLayout>

The dashboard component contains a logout function that clears the secure storage and returns the user to the login.

logout() {
    this.secureStorage.removeAll().then(success => console.log("Cleared storage");
    this.location.back();
}

I tried messing around with subscribing to navigation events and location events to see if I could detect that the user had hit the back button when at the dashboard. I can detect it happening but I would also like to notify the user that they are about to logout and give them a chance to change their mind since they didn't actually click a log out button. I can't seem to figure that part out.

Any help would be greatly appreciated.

Answer 1

While navigating from login to dashboard, you may clear your history. If you do, hitting back button will close the app instead of taking user back to login.

Also you must use RouterExtensions instead of Angular's Router.

this.routerExtensions.navigateByUrl("/dashboard", {clearHistory: true});

You may also listen to back button (activityBackPressed) event, override the default behavior if necessary. Learn more at Application Lifecycle docs.

Note: I presume you wouldn't want to log user out via back button, if you want to, then you may rather store the token in a variable than using secure storage. Secure storage is generally used to keep user logged in even after the app is restarted.