pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/AndrewJBateman/ionic-angular-auth

l" rel="stylesheet" href="https://github.githubassets.com/assets/primer-0b53c3bf3393e2ed.css" /> GitHub - AndrewJBateman/ionic-angular-auth: :clipboard: Ionic Authorization app using jwt tokens. Tutorial code from Simon Grimm of the Ionic Academy
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

About

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

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad © 2024 Your Company Name. All rights reserved.





Check this box to remove all script contents from the fetched content.



Check this box to remove all images from the fetched content.


Check this box to remove all CSS styles from the fetched content.


Check this box to keep images inefficiently compressed and original size.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy