{"id":21244108,"url":"https://github.com/aaronksaunders/ngrx-simple-auth","last_synced_at":"2025-07-10T20:32:30.337Z","repository":{"id":139353021,"uuid":"81172400","full_name":"aaronksaunders/ngrx-simple-auth","owner":"aaronksaunders","description":"Ionic 2 ngrx/store ngrx/effects ngrx/store-dev-tools authentication with token example - Ionicframework","archived":false,"fork":false,"pushed_at":"2017-02-08T06:06:50.000Z","size":1384,"stargazers_count":12,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-03T12:07:56.576Z","etag":null,"topics":["angular2","ionic","ionic-framework","ionic2","ngrx"],"latest_commit_sha":null,"homepage":null,"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/aaronksaunders.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,"zenodo":null}},"created_at":"2017-02-07T06:01:02.000Z","updated_at":"2025-03-05T20:40:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"9b8a4b6e-ad83-46a5-a011-8658c2561c68","html_url":"https://github.com/aaronksaunders/ngrx-simple-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronksaunders/ngrx-simple-auth","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fngrx-simple-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fngrx-simple-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fngrx-simple-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fngrx-simple-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronksaunders","download_url":"https://codeload.github.com/aaronksaunders/ngrx-simple-auth/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronksaunders%2Fngrx-simple-auth/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264652725,"owners_count":23644319,"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":["angular2","ionic","ionic-framework","ionic2","ngrx"],"created_at":"2024-11-21T01:16:16.175Z","updated_at":"2025-07-10T20:32:30.324Z","avatar_url":"https://github.com/aaronksaunders.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngrx-simple-auth\nIonic 2 ngrx/store ngrx/effects ngrx/store-dev-tools authentication with token example - Ionicframework\n\n![https://github.com/aaronksaunders/ngrx-simple-auth/blob/master/ngrx-teaser.gif](https://github.com/aaronksaunders/ngrx-simple-auth/blob/master/ngrx-teaser.gif)\n\nInstall the core ngrx functionality with the store\n```\nnpm install @ngrx/core @ngrx/store --save\n```\n\nInstall effects which we will use to call functions as \"side-effects\" of dispatched states\n```\nnpm install @ngrx/effects --save\n```\n\n```\nnpm install @ngrx/store-devtools --save\n```\nDownload the [Redux Devtools Extension](http://zalmoxisus.github.io/redux-devtools-extension/) which we will use to debug, and watch the state changes in the application\n\nIn your root Angular module `import StoreDevtoolsModule.instrumentOnlyWithExtension()`\n\n```Javascript\nimport { StoreDevtoolsModule } from '@ngrx/store-devtools';\n\n@NgModule({\n  imports: [\n    IonicModule.forRoot(MyApp),\n    EffectsModule.run(AuthenticationEffects),\n    StoreModule.provideStore({authReducer: AuthenticationReducer}),\n    StoreDevtoolsModule.instrumentOnlyWithExtension()\n  ]\n})\nexport class AppModule { }\n```\n\nUsing the `ionic-cli` generate two additional sets of files that we will need, first the login page..\n```\nionic g page login\n```\n\nAnd then the authentication provider, we will not connect to a real back end, but we will simulate the delay of the http request to help demonstrate the functionality of @ngrx/effects inside of the authentication provider\n```\nionic g provider authentication\n ```\n\n### Getting Started with Ionic Code\n \n We are going to get the basic ionic 2 code out of the way first since we all are already pretty comfortable with the basics of an input form and navigating to a new page\n \n Lets add the page components and the Authentication provider to the `app.module.ts`\n \n ```Javascript\nimport {NgModule, ErrorHandler} from '@angular/core';\nimport {IonicApp, IonicModule, IonicErrorHandler} from 'ionic-angular';\nimport {MyApp} from './app.component';\nimport {HomePage} from '../pages/home/home';\nimport {Authentication} from \"../providers/authentication\";\nimport {LoginPage} from \"../pages/login/login\";\n\n\n@NgModule({\n  declarations: [\n    MyApp,\n    HomePage,\n    LoginPage\n  ],\n  imports: [\n    IonicModule.forRoot(MyApp),\n  ],\n  bootstrap: [IonicApp],\n  entryComponents: [\n    MyApp,\n    HomePage,\n    LoginPage\n  ],\n  providers: [Authentication, {provide: ErrorHandler, useClass: IonicErrorHandler}]\n})\nexport class AppModule {}\n```\nNext in the `app.component.ts` we are just going to make the app to straight to `LoginPage` everytime the app starts\n```Javascript\nimport {Component} from '@angular/core';\nimport {Platform } from 'ionic-angular';\nimport {StatusBar, Splashscreen} from 'ionic-native';\n\nimport {HomePage} from '../pages/home/home';\nimport {LoginPage} from \"../pages/login/login\";\n\n\n\n@Component({\n  templateUrl: 'app.html'\n})\nexport class MyApp {\n  rootPage = LoginPage\n\n  constructor(platform: Platform) {\n\n    platform.ready().then(() =\u003e {\n      // Okay, so the platform is ready and our plugins are available.\n      // Here you can do any higher level native things you might need.\n      StatusBar.styleDefault();\n      Splashscreen.hide();\n    });\n  }\n\n}\n```\n\nOn the `login.html` page we have pretty straight forward Ionic2/angular template code\n```html\n\u003cion-header\u003e\n  \u003cion-navbar\u003e\n    \u003cion-title\u003eNgRX/Ionic2 App\u003c/ion-title\u003e\n  \u003c/ion-navbar\u003e\n\u003c/ion-header\u003e\n\n\u003cion-content padding class=\"login\"\u003e\n  \u003cion-list\u003e\n\n    \u003cion-item\u003e\n      \u003cion-label floating\u003eUsername\u003c/ion-label\u003e\n      \u003cion-input type=\"text\" value=\"\" [(ngModel)]=\"username\"\u003e\u003c/ion-input\u003e\n    \u003c/ion-item\u003e\n\n    \u003cion-item\u003e\n      \u003cion-label floating\u003ePassword\u003c/ion-label\u003e\n      \u003cion-input type=\"password\" value=\"\" [(ngModel)]=\"password\"\u003e\u003c/ion-input\u003e\n    \u003c/ion-item\u003e\n\n  \u003c/ion-list\u003e\n  \u003cbutton ion-button (click)=\"loginClicked($event)\"\u003e\n    Login\n  \u003c/button\u003e\n  \u003cbutton ion-button (click)=\"createAccountClicked($event)\"\u003e\n    Create Account\n  \u003c/button\u003e\n  \u003c!-- if there is an error, render it --\u003e\n  \u003cdiv padding *ngIf=\"error\" style=\"color:red; font-weight: 900\"\u003e\n    \u003ch4\u003e{{error.message}}\u003c/h4\u003e\n  \u003c/div\u003e\n\u003c/ion-content\u003e\n```\nIn the `LoginPage` component `login.ts` we still have the basic ionic code we all know\n\n```Javascript\nimport {NavController } from 'ionic-angular';\nimport {Component} from '@angular/core';\n\nimport {HomePage} from \"../home/home\";\n/**\n *\n *\n * @export\n * @class LoginPage\n */\n@Component({\n  templateUrl: 'login.html',\n})\n\nexport class LoginPage {\n\n  private username\n\n  private password\n\n  private error:Object = null;\n\n\n  /**\n   * Creates an instance of LoginPage.\n   *\n   * @param {NavController} nav\n   *\n   * @memberOf LoginPage\n   */\n  constructor(public nav: NavController ) {\n    //This will hold data from our form\n    this.username = null;\n    this.password = null;\n  }\n\n  /**\n   *\n   * @param {any} event\n   *\n   * @memberOf LoginPage\n   */\n  loginClicked(event) {\n    console.log(\"username: \" + this.username + \" password \" + this.password)\n    alert(\"user clicked login - username: \" + this.username + \" password \" + this.password)\n  }\n\n  /**\n   * NOP at the point\n   *\n   * @param {any} event\n   *\n   * @memberOf LoginPage\n   */\n  createAccountClicked(event) {\n\n  }\n}\n```\n-- WORK-IN-PROGRESS --\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fngrx-simple-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronksaunders%2Fngrx-simple-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronksaunders%2Fngrx-simple-auth/lists"}