auth0-samples / auth0-pnp-exampleco-timesheets

End to end sample for the Server + API Patterns & Practices document

Auth0 Architecture Scenario Samples

These sample applications serve as the implementation samples for the Auth0 Architecture Scenarios. In these scenario we build a timesheet application for a fictitious company named ExampleCo.

For more information on the samples, please refer to the README in each sample folder.

Also refer to the individual Architecture Scenario documents for more information:

• Server Client + API
• SPA + API

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, among 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.

Create a free account in Auth0

1. Go to Auth0 and click Sign Up.
2. Use Google, GitHub or Microsoft Account to login.

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.md file for details.

auth0-pnp-exampleco-timesheets's Issues

Error on npm start

I am getting the following error on npm start
ERROR in C:/Users/user/timesheets/app/src/app/auth/auth.service.ts (102,32): Property 'silentCallbackURL' does not exist on type 'AuthConfig'.

It's referencing this line of code:

    this.auth0.renewAuth({
      audience: AUTH_CONFIG.apiUrl,
      redirectUri: AUTH_CONFIG.silentCallbackURL,
      usePostMessage: true
    }, (err, result) => {
      if (err) {
        //alert(`Could not get a new token using silent authentication (${err.error}).`);
      } else {
        //alert(`Successfully renewed auth!`);
        this.setSession(result);
      }
    });
  }

What is the difference between "express-jwt" and "express-oauth2-jwt-bearer"?

Hi,

My application consists of a simple SPA + Node.js/Express.js API (backend). While following documentation I got confused at a point where there are two libraries "express-jwt" and "express-oauth2-jwt-bearer" to resolve I guess the same issue which is decoding the JWT token and matching it with the Auth0 domain.

Here are the links to the respective documentations:

• Documentation that is using "express-jwt" to secure the API
  Node.js API Implementation (SPAs + API)
• Documentation that is using "express-oauth2-jwt-bearer" to secure the API
  Add authorization to an Express.js API application

What is the fundamental difference between the above two? And which library is recommended to use in which case?

Thanks,

a couple of typos

Last paragraph in https://auth0.com/docs/architecture-scenarios/application/spa-api/spa-implementation-angular2#2-authorize-the-user

timesheets-spa application fails to compile

Here is the error message I get when running npm start command in the angular folder

                                                                                                                        
ERROR in H:/work/aurelia-auth0/auth0-pnp-abc-timesheets/timesheets spa/angular/src/app/auth/auth.service.ts (102,32): Property 'silentCallbackURL' does not exist on type 'AuthConfig'.                                                         

Clearly the file auth0-variables.ts.example is missing this definition (silentCallbackURL).

The whole system's configuration seems in error

While I love the idea of this system with three participating apps (node, javascript and python) I found at least one error:

The port number for API-URL should be 4020 - not 8080 as it is currently defined.

Even with this fix, trying to run python cron.py program, I get

λ python cron.py
access-token: eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IlJqWkJOVFkyTnpSQk5VVTVSakF5TkVZeFJEbEZSRUV4T0RWQlJFSTFOVUl4UmpOR1JEQkJPUSJ9.eyJpc3MiOiJodHRwczovL2F1cmVsaWF0b29scy5hdXRoMC5jb20vIiwic3ViIjoibzRVMFEwVEFra080aEJ1aW1EaUI2d1ZseUtGVWRrM2dAY2xpZW50cyIsImF1ZCI6Imh0dHBzOi8vYXBpLmF1cmVsaWF0b29scy5jb20vdGltZXNoZWV0cyIsImV4cCI6MTQ5ODMxODYyNCwiaWF0IjoxNDk4MjMyMjI0LCJzY29wZSI6IiJ9.LVjCE69BHB2n_vVLSb1oamQsxgBtQGNgO0_wZYdJOWfzCjYUfL5gsjBe2cXnv2V2dQZAF8UHmYiSU16sBrN7YntpjrnpsGfep4PswmaMekxY8SymhVErlrZMspQCtdHdspFd2g2eDitIG45oIZOisLV7Mw05Cl5WduBHoc28y0M4Y11zUauqHyV0KetPwhlIHsyVWwDqPT700RG4tro46fbh1q6hJEsIm8BaJ3FZeSksUlsXMpYnnwoJ5iXtByIQwoROI_NAOIXeXWXBi9nF2Ft6VrTKpIip3-zH-0Ba8vuUtYSMqtBIckvQgwXurUDX2lZsjjxD7GgvlI_oeceSRg
URLError = [Errno 10061] No connection could be made because the target machine actively refused it

Where I added the printout line:

	print 'access-token: ' + access_token

trying to see where the problem is taking place. It seems to be that it is the attempt to upload the stylesheet to the API (node) component.

Since I would like to help you to make sure that this Auth0 Server + API Sample works, I am attaching the sections of the code that are specific to me, so you can find what is broken. I am also doubtful whether I "nailed" all configuration data correctly; If not, assuming that I am not the dumbest Auth0 user, this might indicate the need to beef up the relevant README files and / or the

Python

	# Configuration Values
	DOMAIN = "aureliatools.auth0.com" # Update with your Auth0 Domain
	AUDIENCE = "https://api.aureliatools.com/timesheets" # Update with the Identifier of your API
	CLIENT_ID = "o4U0Q0TAkkO4hBuimDiB6wVlyKFUdk3g" # Update with the Client ID of your Non Interactive Client
	CLIENT_SECRET = "a9UyxWSiZB1ObOVBe39_rhdmPBw_FKkQQI_WN2LH1_w8OSVATUGGBzEDetiggBZo" # Update with the Client Secret of your Non Interactive Client
	API_URL = "http://localhost:4020/timesheets/upload"
	GRANT_TYPE = "client_credentials" # OAuth 2.0 flow to use

Angular

  clientID: 'bpLn0Ae5NLj0117fF0wYZ61XILyZuiwB',
  domain: 'aureliatools.auth0.com',
  callbackURL: 'http://localhost:4200/callback',
  silentCallbackURL: 'http://localhost:3001/silent',
  apiUrl: 'https://api.aureliatools.com/timesheets'

Node - .env

AUTH0_DOMAIN=aureliatools.auth0.com
AUTH0_AUDIENCE=o4U0Q0TAkkO4hBuimDiB6wVlyKFUdk3g

---

@chenkie - copying Ryan as I am not sure about Jerrie's frequency of issues checking 😄

Defining the .env strings

I am having difficulty to understand how is is this section to be interpreted

• {DOMAIN}: Set this to the value of your Auth0 Domain. You can retrieve it from the Settings of your Client at the Auth0 Dashboard.
• {API_IDENTIFIER}: Set this to the value of your API Identifier. You can retrieve it from the Settings of your API at the Auth0 Dashboard.

My domain is aureliatools.auth0.com - do I define the respected line in the .env file as

1. AUTH0_DOMAIN={aureliatools.auth0.com}
   or
2. AUTH0_DOMAIN=aureliatools.auth0.com

I would think the case 2. applies as the curly braces without the $ make no sense in this context. They seem to be used as a "visual delineation" for the human reader - and that I do find confusing (not only in this article - it appears everywhere.

Note: this might be perceived as nit-picking, but by now, you know me better - I strive for clarity, effort which includes confusion avoidance 😄

How would one Refresh the user Token?

What would be the preferred way to refresh a token to create a sliding expiration using this approach?

Code - README mismatch in

The section Angular Single Page Application states

Set the configuration values

Rename the auth0-variables.ts.example file in the src/app/auth folder to auth0-variables.ts Once you have renamed the file you should set the following values in your new auth0-variables.ts file:

• {DOMAIN}: Set this to the value of your Auth0 Domain. You can retrieve it from the Settings of your Client at the Auth0 Dashboard.
• {CLIENT_ID}: Set this to the value for your Auth0 Client. You can retrieve it from the Settings of your Client at the Auth0 Dashboard.
• {API_IDENTIFIER}: Set this to the value of your API Identifier. You can retrieve it from the Settings of your API at the Auth0 Dashboard.

This does not describe the content of the auth0-variables.ts.example file being

interface AuthConfig {
  clientID: string;
  domain: string;
  callbackURL: string;
  apiUrl: string;
}

export const AUTH_CONFIG: AuthConfig = {
  clientID: '{CLIENT_ID}',
  domain: '{DOMAIN}',
  callbackURL: 'http://localhost:4200/callback',
  apiUrl: '{API_IDENTIFIER}'
};

I suggest to point out that the apiUrl is the entity named Identifier on the https://manage.auth0.com/#/apis/59499d370be1012a0db4f4c8/settings, which I defined as https://api.aureliatools.com/timesheets (this is of course specific to my instance of this app).

All this writing to indicate how it would be helpful to associate the string apiURL in auth0-variables.ts file with the string Identifier on the Auth0 APIs page.

A comma is missing ...

https://github.com/auth0-samples/auth0-pnp-abc-timesheets/blob/master/timesheets-spa/angular/src/app/auth/auth0-variables.ts.example#L15

SPA + API article has incorrect title

The problem is in the article SPA + API: Node.js Implementation for the API, where the very first paragraph states:

The text in the red rectangle should be Node.js API implementation.