Great content. Today I understood how OAuth works!!! A question. I want to implement a MERN app with Azure AD the flow will be same as shown here right?
It's separated for improved security. I've explained the details in this video - ua-cam.com/video/x6jUDfpESmA/v-deo.html&ab_channel=AmbientCoder Hope this helps!
I have some question to you 1. if after login I want to call an API again, so I use the authorization code in front-end apps again to call API? 2. if number 1 is true, so should I save the authorization code in cookies? 3. if we do this, then every call an API, we will generate new access token?
Storing authorization codes in cookies is not generally the safest but I've seen it done quite often. Also, you should aim to generate access tokens when one expires only. Hope this helps!
Thanks Ezequiel! PKCE is built upon the standard authorization code flow so with some minor tweaks, it's not that challenging to implement it. Auth0 has some good documentation around this - check this out auth0.com/docs/flows/authorization-code-flow-with-proof-key-for-code-exchange-pkce Hope this helps! :)
Awesome video! Thanks a lot. I have some questions: 1. Is there any problem if I implement the Dashboard Backend as the Challenges API? 2. After make the request to the token endpoint, can I put the refresh token in response cookies (using secure, httpOnly) and return the access token as json body? So, in this way the Dashboard Frontend can make more requests to my Challenges API using the access token and when my access token expires I can get a new with the refresh token saved on cookies.
Thanks, I'm glad you liked the video. Regarding your questions: 1 - Ideally it should be separated for improved security. Check out my video on API security where I go into detail about this. ua-cam.com/video/x6jUDfpESmA/v-deo.html&ab_channel=AmbientCoder 2 - Well, this isn't recommended if security is important. The frontend should only have knowledge about the authorization code and the backend should do the refresh token exchange. Hope this helps!
Thanks for the great explanations. It really helped me to understand the workflow. Now I will try to find out, why the "auth0 toolbox" for react can get access tokens in the browser without having the secret.
Thanks Surendra! :) Usually it's best to go with a supported library by your auth provider, but if you're looking for something super general, then Passport.js might be worth a look. Hope this helps.
But like is there any way I can use it in such a way that if a user creates some resources only he should be allowed to access those resources as for now, anyone with read:challenges permission can access all resources, is there any way I can create some resource-ownership system, and if needed those resources can be shared with other apps with OAUTH 2.0 ?
I'm too late to the party but also learning, I have this same doubt, but I think that resource ownership relies on your own API implementation, you could get the user_id from the token_id in you client and set that to your backend request, then filter by user_id at your application level. That's just my though though.
i dont know how to start everything.. At 40:00 you justwent to the page without saying wich server i should start... Could someone maybe help me with that..
How do you implement token renewal via refresh tokens within this example? Do you have a code example? you said in the previous video that this shouldn't be done in the frontend. Is the nodejs port 8080 server the best place to perform this action? Thanks in advance!
Good question! Basically it works like this: 1. When you exchange the authorization code you get both an access token and a refresh token from Auth0 (You need to include "offline_access" in the scopes to let Auth0 know that you want a refresh token in the response). 2. Continue using the access token you received in step 1 to make requests until you receive an error indicating the access token has expired. 3. At this point, use the refresh token you received in step 1 and exchange it to get a new access token by setting "grant_type=refresh_token" in your request. In step 3 you need to send the client ID and client secret along with the refresh token to get a new access token. So you definitely don't want your client secret in the frontend. This is why it's important that this renewal is done in the backend. I originally intended to include this in the video but the video was getting super long so I had to leave it out. For detailed instructions, refer the following links. Hope this helps :) Get refresh token - auth0.com/docs/tokens/refresh-tokens/get-refresh-tokens Use refresh token - auth0.com/docs/tokens/refresh-tokens/use-refresh-tokens
@@ambientcoder5462 Thans for the detailed answer Ambient Coder. Is it possible/recommended to use Auth0 for calling a protected Exact Online REST-API? The last few days I have tried to communicate with this API but only in POSTman I can get the data I need. When I try the OAuth2.0 flow from Exact Online I get errors such as CORS. Using Auth0 for the process and refreshing of tokens (silently) was my new thought. I have not been able to find if you can hook up someone elses API via Auth0, do you know if this is possible at all? I do have an Exact Online account with data. Using Auth0 would save me a lot of time for this. Below is the link of Exact Online. Your expertise for Auth0 and authorization flows will greatly help me here. Thanks a lot. support.exactonline.com/community/s/knowledge-base#All-All-DNO-Content-oauth-eol-oauth-devstep1
Hey WwortelHD, the short answer is, no you can't use Auth0 to access someone else's API. Auth0 is an identity provider which helps you add identity management to your own applications. For example, if you are building a social network you would want to manage user logins and grant access to resources that these users can access. You can build your own identity solution using OAuth 2.0 standard or you can use Auth0 which does all that for you. Likewise, Exact Online will have its own identity solution (I'm not sure what they use). You need to use what they provide to access their authenticated APIs. If you are getting CORS errors, you can try disabling CORS on your browser. Make sure to enable it once you are done testing your app locally. Hope this helps :)
@@ambientcoder5462 Thank you so much, I wish Auth0 provided these answers better. Or I am jus reading over it while reading lots of their documentation. Who knows. Thanks so much!
This was working until two month ago. Redirect: manual for the login component is blocked by chrome newest releases. Any suggestions on how to improve that?
@@ambientcoder5462 also the same question. It works for when i run it locally but i need it to work remotely as well. Is there any other way to fix this issue? Doesn't have to be so straightforward :)
Hey Aiman, in an actual application these permissions would be assigned when the user registers an account based on the privileges allocated to that registration. Applications usually have a user management module for doing this kind of thing behind the scenes. For the scope of this video, I just kept things simple and did that manually.
I have my own login page which is created in react and users stored in nodejs statically in that case how i authenticated my user using auth0 any idea about that and also want to do sso so in that case also how i integrate auth0 with my application
22:40 You can do this without a library by using the URL class or the URLSearchParams class new URL(location.href).searchParams.get("code") new URLSearchParams(location.search).get("code")
As requested by some of you all, the code for all 3 apps shown in this video can be found here - github.com/vigarblock/auth0-end-to-end
The best explanation on the Internet about Auth0. Thank you!!
Hello, I keep getting CORS error from front-end clicking on "Log In" button, how can I fix this?
clear all my doubts. thanks for this excellent explanation ❤
Why is it necessary to implement two different backend applications?
Great content. Today I understood how OAuth works!!!
A question. I want to implement a MERN app with Azure AD the flow will be same as shown here right?
Thank you!
And yes Azure AD does support OAuth 2.0
Awesome man... Thanks for the video...👏 appreciate it...
Thank you :)
The login method is running into a CORS error for me, even though I've added my applications base url under the cors settings for my application
Hello finally did you find a solution?
Don't understand that API is separated from the backend. Could them be one server app?
It's separated for improved security. I've explained the details in this video - ua-cam.com/video/x6jUDfpESmA/v-deo.html&ab_channel=AmbientCoder
Hope this helps!
I have some question to you
1. if after login I want to call an API again, so I use the authorization code in front-end apps again to call API?
2. if number 1 is true, so should I save the authorization code in cookies?
3. if we do this, then every call an API, we will generate new access token?
Storing authorization codes in cookies is not generally the safest but I've seen it done quite often. Also, you should aim to generate access tokens when one expires only. Hope this helps!
Great video! What would it take to also implement PKCE on top of this flow? Would it still be compatible with this explanation?
Thanks in advance
Thanks Ezequiel!
PKCE is built upon the standard authorization code flow so with some minor tweaks, it's not that challenging to implement it.
Auth0 has some good documentation around this - check this out auth0.com/docs/flows/authorization-code-flow-with-proof-key-for-code-exchange-pkce
Hope this helps! :)
Greetings, your explanation is very good. I have a question, will we always have to go to the Auth0 console to allow the passage of new users?
Awesome video! Thanks a lot. I have some questions:
1. Is there any problem if I implement the Dashboard Backend as the Challenges API?
2. After make the request to the token endpoint, can I put the refresh token in response cookies (using secure, httpOnly) and return the access token as json body? So, in this way the Dashboard Frontend can make more requests to my Challenges API using the access token and when my access token expires I can get a new with the refresh token saved on cookies.
Thanks, I'm glad you liked the video.
Regarding your questions:
1 - Ideally it should be separated for improved security. Check out my video on API security where I go into detail about this. ua-cam.com/video/x6jUDfpESmA/v-deo.html&ab_channel=AmbientCoder
2 - Well, this isn't recommended if security is important. The frontend should only have knowledge about the authorization code and the backend should do the refresh token exchange.
Hope this helps!
Thanks for the great explanations. It really helped me to understand the workflow.
Now I will try to find out, why the "auth0 toolbox" for react can get access tokens in the browser without having the secret.
Thanks! I’m glad to hear that you found it helpful 🙂
Awesome Example !! Instead of 3 apps, can we have combine both the backend apps into 1 app, Will it work ?
Did you find that out?
Best explanation! Keep up the good work! Really loved this video.
very nice tutorial, thank you!
Thank you 🙂
Excellent video. Is there any good general purpose (= that works with any openID provider) OIDC library for react that you could recommend ?
Thanks Surendra! :)
Usually it's best to go with a supported library by your auth provider, but if you're looking for something super general, then Passport.js might be worth a look. Hope this helps.
How do we get refresh token? Just like in useAuth0() gives getAccessTokenSilently(), is there any way to get refresh token?
But like is there any way I can use it in such a way that if a user creates some resources only he should be allowed to access those resources as for now, anyone with read:challenges permission can access all resources, is there any way I can create some resource-ownership system, and if needed those resources can be shared with other apps with OAUTH 2.0 ?
I'm too late to the party but also learning, I have this same doubt, but I think that resource ownership relies on your own API implementation, you could get the user_id from the token_id in you client and set that to your backend request, then filter by user_id at your application level. That's just my though though.
i dont know how to start everything.. At 40:00 you justwent to the page without saying wich server i should start... Could someone maybe help me with that..
How to check in forntend user is authenticated or not?
Hi, do you have a CURD operation video using react js as frontend, node js as backend, MySQL as Database, and OAuth 2.0
Yup I cover all that (except the database stuff) in this video - ua-cam.com/video/dyZmsz6usWk/v-deo.html
Hope this helps!
@@ambientcoder5462 what about the database
How do you implement token renewal via refresh tokens within this example? Do you have a code example? you said in the previous video that this shouldn't be done in the frontend. Is the nodejs port 8080 server the best place to perform this action?
Thanks in advance!
Good question! Basically it works like this:
1. When you exchange the authorization code you get both an access token and a refresh token from Auth0 (You need to include "offline_access" in the scopes to let Auth0 know that you want a refresh token in the response).
2. Continue using the access token you received in step 1 to make requests until you receive an error indicating the access token has expired.
3. At this point, use the refresh token you received in step 1 and exchange it to get a new access token by setting "grant_type=refresh_token" in your request.
In step 3 you need to send the client ID and client secret along with the refresh token to get a new access token. So you definitely don't want your client secret in the frontend. This is why it's important that this renewal is done in the backend.
I originally intended to include this in the video but the video was getting super long so I had to leave it out. For detailed instructions, refer the following links. Hope this helps :)
Get refresh token - auth0.com/docs/tokens/refresh-tokens/get-refresh-tokens
Use refresh token - auth0.com/docs/tokens/refresh-tokens/use-refresh-tokens
@@ambientcoder5462 Thans for the detailed answer Ambient Coder. Is it possible/recommended to use Auth0 for calling a protected Exact Online REST-API? The last few days I have tried to communicate with this API but only in POSTman I can get the data I need. When I try the OAuth2.0 flow from Exact Online I get errors such as CORS.
Using Auth0 for the process and refreshing of tokens (silently) was my new thought. I have not been able to find if you can hook up someone elses API via Auth0, do you know if this is possible at all? I do have an Exact Online account with data.
Using Auth0 would save me a lot of time for this. Below is the link of Exact Online. Your expertise for Auth0 and authorization flows will greatly help me here. Thanks a lot.
support.exactonline.com/community/s/knowledge-base#All-All-DNO-Content-oauth-eol-oauth-devstep1
Hey WwortelHD, the short answer is, no you can't use Auth0 to access someone else's API.
Auth0 is an identity provider which helps you add identity management to your own applications. For example, if you are building a social network you would want to manage user logins and grant access to resources that these users can access. You can build your own identity solution using OAuth 2.0 standard or you can use Auth0 which does all that for you.
Likewise, Exact Online will have its own identity solution (I'm not sure what they use). You need to use what they provide to access their authenticated APIs.
If you are getting CORS errors, you can try disabling CORS on your browser. Make sure to enable it once you are done testing your app locally.
Hope this helps :)
@@ambientcoder5462 Thank you so much, I wish Auth0 provided these answers better. Or I am jus reading over it while reading lots of their documentation. Who knows.
Thanks so much!
This was working until two month ago. Redirect: manual for the login component is blocked by chrome newest releases. Any suggestions on how to improve that?
If you're running this locally, then the most straightforward way would be to disable CORS in chrome. Hope this helps!
@@ambientcoder5462 also the same question. It works for when i run it locally but i need it to work remotely as well. Is there any other way to fix this issue? Doesn't have to be so straightforward :)
Why do we need to give permission manually when user sign up?
Hey Aiman, in an actual application these permissions would be assigned when the user registers an account based on the privileges allocated to that registration. Applications usually have a user management module for doing this kind of thing behind the scenes. For the scope of this video, I just kept things simple and did that manually.
Who is the Identity Provider in this implementation?
Auth0
Can you please mak a video with PKCE?
I will consider it. Thanks for the suggestion!
I have my own login page which is created in react and users stored in nodejs statically in that case how i authenticated my user using auth0 any idea about that and also want to do sso so in that case also how i integrate auth0 with my application
You got the solution?
How can I get the user information?
well done thanks sir
Thanks :)
can I have this code repo?
I will add a link to it in the description 👌
@@ambientcoder5462 Update ?
@@theofrgs Apologies for the delay, I've been caught up with so much work lately. The link has been added. Hope this helps :)
thanks for the video, but a little hard to hear.
sound Quality is bad
Now this was a misleading thumbnail...
Weird problem, I go to my tenanturl/oauth/token and get 'Not found.'
22:40
You can do this without a library by using the URL class or the URLSearchParams class
new URL(location.href).searchParams.get("code")
new URLSearchParams(location.search).get("code")