Ionic 4 login flow?

Ionic Framework
1

Hello guys, I was wondering if there’s a guide somewhere that I can use to implement login/authentication using Ionic 4, I’ve seen some guides but most are for previous versions of Ionic.

2

https://devdactic.com/ionic-4-login-angular/

3

I saw that tutorial, there are a few things that are not quite clear, what on earth is this line of code here authenticationState = new BehaviorSubject(false);

And why do we need a promise to set the the value to true?

login() {
    console.log("Login");
    return this.storage.set(TOKEN_KEY, "Bearer 1234567").then(() => {
      this.authenticationState.next(true);
    });
  }
4

This is because they’re using Oauth 2 and so once the user has logged in they store the token in local storage (which isn’t safe) to use it in next http requests.

5

@angular/fire
I usually use google’s firebase authentication

Also, ionic storage is asynchronous. I prefer async/await notation for promises, it’s more readable
Ionic storage docs

6

Is it just me or protecting the routes is redundant? I mean in a mobile app you don’t have such things as routes, why would we ever want to protect routes if they don’t exist in the first place??

7

Ionic still works as a single page web application until you compile to iOS or Android so its still has to work for that

8

Umm… That seems like unnecessary extra work, at the end of the day you are going to compile your app both for iOS and Android, so why would you protect the routes?, plus, I rather test my app on a simulator or a real device than testing it in a browser.

I could be wrong, but it does seem unnecessary to be honest.

9

I don’t think your wrong here, if you’re never hosting the app, only compiling, I don’t see why you would even have to worry. User sign in first, then all routes are safe?

10

User logins and save the token in the storage, then somehow the app needs to track this information so next time the same user comes back and open up the app he/she should be directed to the home page, skipping the login section.

11

You could just have the main app component check the storage and redirect to login or home, and then still no guards

12

Here is one more good resource: https://javebratt.com/firebase-free-course/
Jorge’s tutorial helped me a lot, and he keeps it updated.