classicvalues / ionic-angular-auth

:clipboard: Ionic Authorization app using jwt tokens. Tutorial code from Simon Grimm of the Ionic Academy

⚡ 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
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples from Simon Grimm of the IonicAcademy'
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 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 v6
• Ionic/angular v6
• Angular v14
• Angular RxJS Library v7 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. Tested using ionic server and dummy user credentials to replace 'register' function.
• To-do: Nothing

👏 Inspiration

• Simon Grimm of the IonicAcademy, Youtube video 'Building an Ionic 4 JWT Login with Tab Bar & Angular Routing'
• Written version of tutorial from Devtactic website: Building an Ionic 4 JWT Login with Tab Bar & Angular Routing

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]