Saving User-Token securely in a NativeScript application

Question

Saving User-Token securely in a NativeScript application

In my {N}-App, I am looking to create a login system for users. After a successful login, the user receives a token required for making requests. Currently, I store this token using the application-settings module. Now, I want the UI to dynamically switch between the "Login Screen" and "Personal Information" screens based on the user's login status. The features of the application are accessible even without logging in, positioning the login tab on the sidebar.

I believe the route needs to be redirected to another component or the component overlay should change depending on whether the user token is saved. Is there a way to achieve this? I assume certain configurations need to be made in the component annotation within the .ts file, which may require modification of the routing setup.

I realize that there is some redundancy in defining the tab name both in the Route and the routing directory, indicating a need for routing adjustments regardless.

One idea I had was:

//router definition
path: "Main", component: MainPage, children: [
    (appSettings.getBoolean("isLoggedIn") == true) ?
        {path:  "Login", component: LoginPage} : 
        {path: "My Account", component: LoginPage}
    ]

Unfortunately, this solution did not work as expected. Are there any other suggestions?

Edit:

Perhaps I haven't articulated my challenge clearly. My application features a sidebar with a "Login" label. When a user clicks on it and logs in, I want the "Login" label to be replaced with an "Account" link where the user can view personal information. This account access does not grant permission to new pages, so the objective is to simply swap the sidebar entry and page overlay accordingly.

typescript authentication token nativescript

Answer 1

Answer №1

We were able to accomplish something similar by utilizing Angular's auth guard. Check out a helpful answer here.

To set up the auth guard, you can follow this example:

@Injectable()
export class AuthGuard implements CanActivate {
    auth: any = {};
    
    constructor(private authService: AuthService, private router: Router) {}
    
    canActivate() {
        if (/*user is logged in*/) {
            this.router.navigate(['/dashboard']);
            return true;
        } else {
            this.router.navigate(['/login']);
        }
        return false;
    }
}

In your router configuration, you would implement it like this:

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: AppKeys.Paths.login, loadChildren: () => require(AppKeys.Paths.loginModule)['LoginModule'], canLoad: [AuthGuard]}
];

AFTER EDIT

If I'm understanding your issue correctly, you can achieve what you need with a simpler solution. You can utilize the routerLink directive and conditional text within the listview item, for example:

<Button text="{{ isLoggedin ? 'login' : 'personal info' }}" [nsRouterLink]="[isLoggedin ? '/login' : '/personalinfo']"></Button>

In the component, you would have an isLoggedin variable initialized with the value stored in the app settings.

This code hasn't been tested and may need adjustments (switching from button to listview item, paths, etc.), but it conveys the general idea behind the implementation :)

Answer 2

We were able to accomplish something similar by utilizing Angular's auth guard. Check out a helpful answer here.

To set up the auth guard, you can follow this example:

@Injectable()
export class AuthGuard implements CanActivate {
    auth: any = {};
    
    constructor(private authService: AuthService, private router: Router) {}
    
    canActivate() {
        if (/*user is logged in*/) {
            this.router.navigate(['/dashboard']);
            return true;
        } else {
            this.router.navigate(['/login']);
        }
        return false;
    }
}

In your router configuration, you would implement it like this:

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: AppKeys.Paths.login, loadChildren: () => require(AppKeys.Paths.loginModule)['LoginModule'], canLoad: [AuthGuard]}
];

AFTER EDIT

If I'm understanding your issue correctly, you can achieve what you need with a simpler solution. You can utilize the routerLink directive and conditional text within the listview item, for example:

<Button text="{{ isLoggedin ? 'login' : 'personal info' }}" [nsRouterLink]="[isLoggedin ? '/login' : '/personalinfo']"></Button>

In the component, you would have an isLoggedin variable initialized with the value stored in the app settings.

This code hasn't been tested and may need adjustments (switching from button to listview item, paths, etc.), but it conveys the general idea behind the implementation :)

Saving User-Token securely in a NativeScript application

Answer №1

Similar questions

What is the best way to apply a CSS class to a ComponentRef that has been generated in Angular 5

Troubleshooting `TypeError: document.createRange is not a function` error when testing material ui popper using react-testing-library

Angular2: Promise Rejection: Quotes cannot be used for evaluation in this component

Guide to accessing a nested and potentially optional object property with a default value and specifying its data type

Filtering data on objects in Angular can be achieved by utilizing the built-in

Is it possible to constrain generic indexed access parameters?

What is the best method to adjust the width of the PrimeNG ConfirmDialog widget from a logic perspective

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

Having trouble uploading a pdf file into a .tsx file

Typescript: searching for a specific type within an array of objects

Guide to waiting for API responses with redux-saga

Fixing the forwardRef issue with react-router-dom and material-ui

Ways to refresh ngOnInit in order to renew Interpolation

Modify database record when an eligible token is supplied

Why aren't my arrays' characteristics being recognized when I create an instance of this class?

Retrieve an array of specific column values from an array of objects using Typescript

Error in Redux reducer file caused by an incorrect data type in action.payload

Error: Unable to access properties from an undefined source while trying to read 'reRenderOnLangChange'

Discovering the number of items that have been filtered in isotope-layout using React and Typescript

Setting up a Typescript project using webpack