ngrx-auth's Introduction

ngrx-auth

This is the sample code for the Auth0 tutorial Adding Authentication to NgRx.

This project was generated with Angular CLI version 6.1.5.

Tutorial and blog post originally appeared on Auth0's Blog: Add Authentication to an NgRx Project

Getting Started

To get started, clone the repo, install the dependencies, and check out the "Starting point" commit to follow along with the tutorial.

git clone https://github.com/auth0-blog/ngrx-auth.git
cd ngrx-auth
npm install
git checkout 23c1b25

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Using Auth0 for Authentication

This app uses Auth0 to manage authentication.

Sign Up for Auth0

You'll first need to sign up for an Auth0 account. You can sign up for a free Auth0 account here.

Set Up an Application

Once you've got your account, you can set up an application to use with our NgRx project. We'll only be setting up a Single Page Application (SPA) in Auth0 since we're using the Google Books API as our back end.

Here's how to set that up:

Go to your Auth0 Applications and click the "Create Application" button.
Name your new app, select "Single Page Web Applications," and click the "Create" button. You can skip the Quick Start and click on Settings.
In the Settings for your new Auth0 app, add http://localhost:4200/callback to the Allowed Callback URLs. (We're using localhost:4200 since it's the default port for the Angular CLI serve command.)
Add http://localhost:4200 to the Allowed Logout URLs.
Click the "Save Changes" button.
Copy down your Domain and Client ID. We'll use them in just a minute.
If you'd like, you can set up some social connections. You can then enable them for your app in the Application options under the Connections tab. The example shown in the screenshot above utilizes username/password database, Facebook, Google, and Twitter.

Note: Under the OAuth tab of Advanced Settings (at the bottom of the Settings section) you should see that the JsonWebToken Signature Algorithm is set to RS256. This is the default for new applications. If it is set to HS256, please change it to RS256. You can read more about RS256 vs. HS256 JWT signing algorithms here.

What is Auth0?

Auth0 helps you to:

Add authentication with multiple authentication sources, either social like Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others, or enterprise identity systems like Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider.
Add authentication through more traditional username/password databases.
Add support for linking different user accounts with the same user.
Support for generating signed Json Web Tokens to call your APIs and flow the user identity securely.
Analytics of how, when and where users are logging in.
Pull data from other sources and add it to the user profile, through JavaScript rules.

Issue Reporting

If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

Author

Auth0

License

This project is licensed under the MIT license. See the LICENSE file for more info.

ngrx-auth's People

Contributors

Stargazers

Watchers

ngrx-auth's Issues

Persist Authentication issue

Good morning, im currently having an issue with persisting authentication on refresh. I was wondering if you could help me.. Here is my checkLogin$ effect:

@effect()
checkLogin$ = this.actions$.pipe(
ofType(fromAuth.AuthActionTypes.CheckLogin),
exhaustMap(() => {
console.debug('IN CHECKLOGIN$');
console.debug(CHECKLOGIN$:: ${this.authService.authenticated});
if (this.authService.authenticated) {
return this.authService.checkSession$().pipe(
map((authResult: any) => {
if (authResult && authResult.accessToken) {
this.authService.setAuth(authResult);
return new fromAuth.LoginSuccess();
}
}),
catchError(error => {
this.authService.resetAuthFlag();
return of( new fromAuth.LoginFailure({ error }));
})
);
} else {
return EMPTY;
}
})
);

Sorry: The issue i'm having is the console.debugs are never hit.

Im receiving an error message when it tries to call the checksession$(): the cb parameter is invalid..

Thank you in advance

Login completed action generate error after i adding polyfills in angular cli

ERROR Error: Effect "AuthEffects.loginCompleteddd$" dispatched an invalid action: undefined

"Effect "AuthEffects.loginComplete$" dispatched an invalid action: undefined"

@samjulien

Getting the below error when running the app in Firefox on windows 10, (google chrome works). The app freezes on the callback component.

ERROR Error: "Effect "AuthEffects.loginComplete$" dispatched an invalid action: undefined"
ERROR TypeError: "Actions must be objects"

  @Effect()
  loginComplete$ = this.actions$
    .ofType<fromAuth.Login>(fromAuth.AuthActionTypes.LoginComplete)
    .pipe(
      exhaustMap(() => {
        return this.authService.parseHash$().pipe(
          map((authResult: any) => {
            console.log('fired');
            if (authResult && authResult.accessToken) {
              this.authService.setAuth(authResult);
              window.location.hash = '';
              return new fromAuth.LoginSuccess();
            }
          }),
          catchError(error => of(new fromAuth.LoginFailure(error)))
        );
      })
    );

When I add the console.log('fired') I notice that it is being displayed twice, so I am assuming the effect is running twice?

I have googled a few solutions like
-Disabling StoreDevtoolsModule.instrument as this has known to fire effects twice, but no joy...

Any help would be much appreciated....

Recommend Projects

auth0-blog / ngrx-auth Goto Github PK