Skip to content

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

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-angular-auth

Repository files navigation

⚡ 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

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

screenshot

📶 Technologies

💾 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

📁 License

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

✉️ Contact