Newbie question: Which OAuth 2.0 Flow?

Help
1

Hello community!

I am wondering which Auth0 2.0 Flow is suitable for our application.

What i found so far is, that there are

  • Client Credentials Flow
  • Authorization Code Flow
  • Resource Owner Password Flow
  • Authorization Code Flow with Proof Key for Code Exchange (PKCE)
  • Implicit Flow with Form Post

My candidates are

  • Authorization Code Flow
  • Resource Owner Password Flow

But as a newbie, I am not sure. I even may miss something?
I would appreciate any advice to find a proper flow for our application.

The application consists of 3 parts: Front end, REST - API and Database

1. Front end:
Just HTML, CSS, Javascript, running in a HTTP Server.
The front end calls a REST - API via Ajax calls to get data.

2. REST API
Java REST API managed by the Spring Framework with Spring Security 5, running in an application server.
Called by the front end. Provides data to the front end.
Calls the database.

8. Database
Stores the user information (including passwords)

Current authentication: The user adds the credential (username, password) to an HTML page and submit them via Ajax to the REST API. If successful, the REST API returns an access token, which can be used for further requests to get data from the API (see picture).

Auth
Auth1147×763 36.6 KB

I hope the description of the application is sufficient to find a suitable flow.

Thank you very much!
Marcus

2

hi @gehring and welcome to the Auth0 Community! :tada:

Judging from your description it sounds like your application most closely aligns with our concept of a Regular Web Application where most of the application logic is happening server side.

In that case I believe the Authorization Code flow would be our recommendation for OAuth 2.0 flow. I can see how the Resource Owner Password flow could also make sense, but it would be our recommendation if possible to stick to a flow that allowed your application to be free from handling sensitive info such as users’ passwords etc.

Hope this helps let us know if you have any further concerns.

Best,
Colin

2 Likes
3

Hi Colin,

thank you for your welcome and your thoughts. I will try this flow and will come back later to report …

Marcus

5

Hello Community (or Colin? :slight_smile: )

I followed your advice to go for the concept of a Regular Web Application with the Authorization Code flow.

I came up with the following communication flow. The question is, does is work like this?

The basic idea is to get an ACCESS_TOKEN from Auth0 via javascript and then use this token to make the API calls.

Getting the ACCESS_TOKEN seems pretty clear to me, but what puzzles me is how the API knows that this token is actually valid? Can my API pass this token to Auth0 and Auth0 “tells” my API the token is valid or not?

AuthentificationWithAuth0
AuthentificationWithAuth01414×887 50.1 KB

Thank you very much and any other advice would be highly appreciated.
Marcus

6

Hi @gehring thanks for reaching back out!

Nice diagram :star_struck: for the most part that looks to model the Authorization Code Flow well. For a full sequence of how that dance is done you can refer to this doc:

Let me provide some documentation on calling an API with the Auth Code Flow that I think will help clarify things with your API. The final link on validating access tokens should provide some more explicit steps on how your API can validate an Access Token issued by Auth0.
https://auth0.com/docs/flows/call-your-api-using-the-authorization-code-flow

Hope this helps you on your quest, let us know if you have any further concerns!

Best,
Colin

3 Likes
7

Hi Colin,

thank you very much to putting me on the right way. I think I got the point now.

For everybody, who reads this in the Future and does not know about JWT Tokens:

The API does not need to know Auth0 and therefore does not need to communicate with Auth0.
The the API needs to know is the client secret which will be used then to verify if the JWT Token is valid.

8

Hi @Gehring,

Always happy to help! I forgot to mention and you may have already seen it, but once you create your API in Auth0 there should be a ‘quickstart’ tab that will provide sample code for validating a JWT. Depending on what language you’re coding in that could provide a very solid base for configuring middleware that will effectively decode and validate the access token.

Best,
Colin

1 Like
9

Thank you very much!

10

Hi Colin,

I am sorry to bother, but I stuck with getting the jwt token in java script.
The idea is the following: Getting the token in java script, keep it in the session and use it for my ajax calls to my API.

So far I could manage to login with the following code:

let auth0 = null;

const loginWithAut0 = async () => {

auth0 = await createAuth0Client({domain: ‘dev-lalala.com’, client_id: ‘lalalala’,});
await auth0.loginWithRedirect({redirect_uri: ‘https://www.lalala.com/index.html’ });

};

const getToken = async () => {

    const token = await auth0.getTokenSilently();
    console.log(token);

};

After clicking the login button, which calls loginWithAuth0(), I am redirected to the login form from Auth0 and I login successful. Then I am redirected to my previous page with the “code” and “state”:

https://www.lalala.com/index.html?code=lalacodelala&state=lalastatelala

So far so good, but how do I get the jwt token?

When I call “getToken”, the “auth0” variable is already “undefined” because the whole page is reloaded.

I am sorry, to ask such a simple question. I studied many examples, but I really don’t get it.

Help is highly welcome!
Marcus

11

I got the token. :slight_smile:

Here is how I got it:

let auth0 = null;

//Called by login button
const loginWithAut0 = async () => {

  try {
      await auth0.loginWithRedirect({
          redirect_uri:"https://www.lalala/index.html"  
      });
   } catch (err) {
    console.log("Log in failed", err);
   }
};


window.onload = async () => {

auth0  = await createAuth0Client({
	domain: 'dev-lalala.auth0.com',
	client_id: 'lalala',
});

  const isAuthenticated = await auth0.isAuthenticated();

  if (isAuthenticated) {
    return;
  }

  const query = window.location.search;
  if (query.includes("code=") && query.includes("state=")) {

    await auth0.handleRedirectCallback();
    const token = await auth0.getTokenSilently();
    const id_token= await auth0.getIdTokenClaims();
    console.log(token);
    console.log(id_token.__raw);
    
  }

};

3 Likes
12

Hi @Gehring

Thanks for supplying your solution for the rest of the community! And glad to hear you were able to find the solution to your problem!

Have a great week :grinning:

Best,
Colin

2 Likes
13

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.