{"id":18614993,"url":"https://github.com/andrewjbateman/ionic-angular-auth","last_synced_at":"2025-04-11T00:31:03.453Z","repository":{"id":96859538,"uuid":"215802639","full_name":"AndrewJBateman/ionic-angular-auth","owner":"AndrewJBateman","description":":clipboard: Ionic Authorization app using jwt tokens. Tutorial code from Simon Grimm of the Ionic Academy","archived":false,"fork":false,"pushed_at":"2022-10-15T15:08:32.000Z","size":1126,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-25T06:51:16.322Z","etag":null,"topics":["angular","angular14","authorization","canactivate","html5","ionic","ionic6","jwt","jwt-bearer-tokens","rxjs7","scss","typescript4"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndrewJBateman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-17T13:43:29.000Z","updated_at":"2023-09-24T17:28:36.000Z","dependencies_parsed_at":null,"dependency_job_id":"8890bd6c-2466-4f23-8829-2b52b8477097","html_url":"https://github.com/AndrewJBateman/ionic-angular-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndrewJBateman%2Fionic-angular-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndrewJBateman","download_url":"https://codeload.github.com/AndrewJBateman/ionic-angular-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322236,"owners_count":21084333,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular14","authorization","canactivate","html5","ionic","ionic6","jwt","jwt-bearer-tokens","rxjs7","scss","typescript4"],"created_at":"2024-11-07T03:27:46.276Z","updated_at":"2025-04-11T00:31:03.444Z","avatar_url":"https://github.com/AndrewJBateman.png","language":"TypeScript","readme":"# :zap: Ionic Angular Auth\n\n* App to prevent access to 'members' route if user not authorized. Authorization is via email \u0026 password converted to a JWT token instead of using a backend.\n* Another great tutorial from [Simon Grimm of the IonicAcademy'](https://www.youtube.com/channel/UCZZPgUIorPao48a1tBYSDgg) - see [:clap: Inspiration](#clap-inspiration) below.\n* **Note:** to open web links in a new window use: _ctrl+click on link_\n\n![GitHub repo size](https://img.shields.io/github/repo-size/AndrewJBateman/ionic-angular-auth?style=plastic)\n![GitHub pull requests](https://img.shields.io/github/issues-pr/AndrewJBateman/ionic-angular-auth?style=plastic)\n![GitHub Repo stars](https://img.shields.io/github/stars/AndrewJBateman/ionic-angular-auth?style=plastic)\n![GitHub last commit](https://img.shields.io/github/last-commit/AndrewJBateman/ionic-angular-auth?style=plastic)\n\n## :page_facing_up: Table of contents\n\n* [:zap: Ionic Angular Auth](#zap-ionic-angular-auth)\n  * [:page_facing_up: Table of contents](#page_facing_up-table-of-contents)\n  * [:books: General info](#books-general-info)\n  * [:camera: Screenshots](#camera-screenshots)\n  * [:signal_strength: Technologies](#signal_strength-technologies)\n  * [:floppy_disk: Setup](#floppy_disk-setup)\n  * [:computer: Code Examples from Simon Grimm of the IonicAcademy'](#computer-code-examples-from-simon-grimm-of-the-ionicacademy)\n  * [:cool: Features](#cool-features)\n  * [:clipboard: Status \u0026 To-do list](#clipboard-status--to-do-list)\n  * [:clap: Inspiration](#clap-inspiration)\n  * [:file_folder: License](#file_folder-license)\n  * [:envelope: Contact](#envelope-contact)\n\n## :books: General info\n\n* Initial screen is a login page with email and password fields.\n* Angular 'canActivate' authguard limits access to the 'members/' route to only authorised (JWT token-bearing) users.\n* Example login details stored in app to test login system and avoid the need for a backend\n* Correct login credentials routes user to 'member' page\n* User credentials stored in Ionic storage so they can be viewed in Dev console/Application/Storage/Ionic Storage/_ionickv\n* Note: the 'register' page does not actually do anything\n\n## :camera: Screenshots\n\n![screenshot](./img/login.png)\n\n## :signal_strength: Technologies\n\n* [Ionic v6](https://ionicframework.com/)\n* [Ionic/angular v6](https://ionicframework.com/)\n* [Angular v14](https://angular.io/)\n* [Angular RxJS Library v7](https://angular.io/guide/rx-library) Observable functions\n* [@auth0/angular-jwt v5](https://www.npmjs.com/package/@auth0/angular-jwt) provides an HttpInterceptor which automatically attaches a JSON Web Token to HttpClient requests.\n* [Ionic Storage for Angular v3](https://www.npmjs.com/package/@ionic/storage-angular) key-value Storage module based on LocalForage.\n\n## :floppy_disk: Setup\n\n* Run `npm i` to install dependencies\n* To start the server on _localhost://8100_ type: 'ionic serve'\n* App uses example credentials to test system. There is no connection to an external database etc.\n* To start the server on a mobile using Ionic devapp and connected via wifi, type: 'ionic serve --devapp'\n* The Ionic DevApp was installed on an Android device from the Google Play app store.\n\n## :computer: Code Examples from [Simon Grimm of the IonicAcademy'](https://www.youtube.com/channel/UCZZPgUIorPao48a1tBYSDgg)\n\n* canActivate function uses auth service to see if user authorized.\n\n```typescript\n\n// uses auth.service to check if user has token in storage. Returns true if there is a token\n// returns false if user does not have a token and navigates to initial login page.\ncanActivate(route: ActivatedRouteSnapshot): Observable\u003cboolean\u003e {\n  return this.auth.user.pipe(\n    take(1),\n    map(user =\u003e {\n      console.log('Can activate: ', user);\n      if (!user) {\n        this.alertCtrl.create({\n          header: 'Unauthorized',\n          message: 'You are not allowed to access that page.',\n          buttons: ['OK']\n        }).then(alert =\u003e alert.present());\n\n        this.router.navigateByUrl('/');\n        return false;\n      } else {\n        return true;\n      }\n    })\n  );\n}\n```\n\n## :cool: Features\n\n* JWT token generated and stored using Ionic Storage - viewable in the Dev console.\n* AuthGuard canActivate only true with this token. Token removed upon logging out.\n\n## :clipboard: Status \u0026 To-do list\n\n* Status: Working. Tested using ionic server and dummy user credentials to replace 'register' function.\n* To-do: Nothing\n\n## :clap: Inspiration\n\n* [Simon Grimm of the IonicAcademy, Youtube video 'Building an Ionic 4 JWT Login with Tab Bar \u0026 Angular Routing'](https://www.youtube.com/watch?v=lNqXCn8KacI)\n* [Written version of tutorial from Devtactic website: Building an Ionic 4 JWT Login with Tab Bar \u0026 Angular Routing](https://devdactic.com/ionic-4-jwt-login/)\n\n## :file_folder: License\n\n* This project is licensed under the terms of the MIT license.\n\n## :envelope: Contact\n\n* Repo created by [ABateman](https://github.com/AndrewJBateman), email: gomezbateman@yahoo.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandrewjbateman%2Fionic-angular-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandrewjbateman%2Fionic-angular-auth/lists"}