⚡ Ionic Angular Auth

App to prevent access to 'members' route if user not authorized. Authorization is via email & password converted to a JWT token instead of using a backend.
Another great tutorial from Simon Grimm of the IonicAcademy' - see 👏 Inspiration below.
Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

⚡ Ionic Angular Auth

📚 General info

Initial screen is a login page with email and password fields.
Angular 'canActivate' authguard limits access to the 'members/' route to only authorised (JWT token-bearing) users.
Example login details stored in app to test login system and avoid the need for a backend
Correct login credentials routes user to 'member' page
User credentials stored in Ionic storage so they can be viewed in Dev console/Application/Storage/Ionic Storage/_ionickv
Note: the 'register' page does not actually do anything

📷 Screenshots

📶 Technologies

Ionic v5
Ionic/angular v5
Angular v12
Angular RxJS Library v6 Observable functions
@auth0/angular-jwt v5 provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.
Ionic Storage for Angular v3 key-value Storage module based on LocalForage.

💾 Setup

Run npm i to install dependencies
To start the server on localhost://8100 type: 'ionic serve'
App uses example credentials to test system. There is no connection to an external database etc.
To start the server on a mobile using Ionic devapp and connected via wifi, type: 'ionic serve --devapp'
The Ionic DevApp was installed on an Android device from the Google Play app store.

💻 Code Examples from Simon Grimm of the IonicAcademy'

canActivate function uses auth service to see if user authorized.

// uses auth.service to check if user has token in storage. Returns true if there is a token
// returns false if user does not have a token and navigates to initial login page.
canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
  return this.auth.user.pipe(
    take(1),
    map(user => {
      console.log('Can activate: ', user);
      if (!user) {
        this.alertCtrl.create({
          header: 'Unauthorized',
          message: 'You are not allowed to access that page.',
          buttons: ['OK']
        }).then(alert => alert.present());

        this.router.navigateByUrl('/');
        return false;
      } else {
        return true;
      }
    })
  );
}

🆒 Features

JWT token generated and stored using Ionic Storage - viewable in the Dev console.
AuthGuard canActivate only true with this token. Token removed upon logging out.

📋 Status & To-do list

Status: Working. Updated may 2021. Tested using ionic server and dummy user credentials to replace 'register' function.
To-do: Nothing

Mrian07/kalti

⚡ Ionic Angular Auth

📄 Table of contents

📚 General info

📷 Screenshots

📶 Technologies

💾 Setup

💻 Code Examples from Simon Grimm of the IonicAcademy'

🆒 Features

📋 Status & To-do list

👏 Inspiration

📁 License

✉️ Contact