Hey Nerdy, thank you very much for this easy-to-follow video, I was trying to wrap my head around Okta SAML SSO integration and this was perfect. Keep 'em coming boss, you've got yourself a new subscriber!
Thanks for the video. I´m traying implement with spring boot backend and azure ad idp but i have an error. My fetch request has a cross problem when redirect to azure, the request has been blocked because the origin is null. Any idea? Thanks in advanced
Thanks for sharing, I had a question about going into production. Is it really the backend url (https) that needs to be entered in the okta console? thank you.
Error : Its lopping around, if the user authenticates then it callback the post request and in that again passport is inititiased which cases repeated redirect please help me out
Firgured it out. Needed to install ts-node-dev globally and didn't realise but I didn't have Typescript installed globally either! Then ran ts-node-dev --respawn --transpile-only source/server.ts (from the server folder)
Thanks for sharing man! I have build it to work along with an open source project called Marquez for lineage events. Everything works fine when running locally but once I deployed to kubernetes cluster, I get an error when this web-server is redirecting me back to Marquez and I get an error response on my screen saying Can not GET /login/callback. Sometimes I get the error Can not POST /login/callback. Do you any ideia of what it might be?
Great question. At the time I created it, I believe I found you could use either. I don't have a straight answer for this. Test it out and tell me the results? We're all learning this together lmao!!
Hey Nerdy, Thank you very much for the video. I am trying to implement Okta's SAML SSO integration with a nest.js backend. I was curious on if you had any recommendations on implementing this or if I could run the same configuration settings with my nest.js backend.
I have another secnario. I have 2 Okta one act as SP and the 2nd as IDP and I have a React Client app. The SP authentication protocol is OIDC, and the IDP is saml2. I setup the required integration on both Okta for saml2. The athentication flow is working correctly until it redirect the user back to the main react application. So SP initiated the Auth request and the IDP verifiy and identify and finally it redirect the user to the React app. at this stage I have no way to get the token and authenticate the user. I need some help here please.
I tried replacing your axios code with a single axiosInstance in a different folder and importing the specific API function but this causes infinite reload errors. Do you know what causes this issue?
Hey this a great video. Thanks for making it. I am wondering how can i manage the okta session, accessToken, etc. I am trying to build a logout feature
Hi,i have used the same project code to work with okta with your help,but i couldnt be able to get the succes respons from /whoami & due to this application.tsx is not returning email,also used my own certificate & entery point too,can you please help me to fix this isue,plz.....
So, if the email is not being returned, it's possible your saml response from Okta isn't sending it. Log the response from the Saml provider and see what it says
Thanks for this great video. I have a question: why does the route '/login/callback', which is called by octa after a successful sign-in, call passport.authenticate again? Does not seem to be necessary.
Great video, but I have a question. Suppose you are not working inside a local host.( the front end does have a domain, but the backend is local) Then the callback url of the Okla application would be the backend which does not have a domain name, how would users login? How can they be redirected again to the backed for the passport authentication?
@@TheNerdyCanuck hi, yes I think you understood. in the end I created 2 subdomains one for the frontend and one for the backend (api). So this solved the localhost issue. Thanks for your help and the video :) !
Thanks for great video, is there any way to pass query string parameters, in my scenario I need to pass some information in query string parameter for react app which is getting lost during redirect?
No, but if you build it, you can take that static build folder and pass it to an nginx container. I have a video on react + docker, should be exactly what you need. You'll have to deploy the api as well in the same way.
Thanks for posting this video, does this method also work for Jumpcloud SAML SSO? didn't find any documentation with react node integration with Jumpcloud
@@Ishankulkarni Oh I see, that's an interesting idea. I haven't done it that way, but if you are serving it statically I don't even know if you need the react side of this. I'd have to see the code.
Thanks for you interesting tutorial. I've implemented it and it is working perfectly in local. But in deployed version the whoami request always returns 401.
Helpful. Can you create a tutorial for saml login authentication workflow from react as frontend, flask as backend, and idp as aws. I am curious to learn the SP initiator workflow.
Thank you for sharing this, my friend. The video you provided is excellent and provides a comprehensive explanation of all the steps involved.
Many thanks!!!! I just needed something quick to test out a saml integration. You're the man !!!
Hey Nerdy, thank you very much for this easy-to-follow video, I was trying to wrap my head around Okta SAML SSO integration and this was perfect. Keep 'em coming boss, you've got yourself a new subscriber!
No problem, struggled with this one for a LONG time.
Thanks for this man. Great video with a proper explanation of all the steps.
This has been extremely useful, exactly what I was looking for.
Thank you so much for this tutorial!
It finally makes everything make sense!
Thanks for the video. I´m traying implement with spring boot backend and azure ad idp but i have an error. My fetch request has a cross problem when redirect to azure, the request has been blocked because the origin is null. Any idea? Thanks in advanced
It's possibly getting blocked because it's not https, I couldn't be sure though since I haven't used azure.
Hey I'm trying to implement React + spring and azure too. Did you have any success?
Thank you so much for this simple explanation.
❤️ Thanks for this. Trying to implement Saml SSO with NextJs and Azure Ad.
Logo out Functionality need bro through passport saml
Logging out, a link should be provided by your SAML provider to go to
Thanks for sharing, I had a question about going into production. Is it really the backend url (https) that needs to be entered in the okta console? thank you.
Okta needs to be able to hit a backend API, so yes. You'll definitely need https for prod
@@TheNerdyCanuck thanks for your response!
You rock,but passport did all the samlResponse parsing and so on?Im trying to figure how to use aws sso but my knolewdge of saml is very limited....
So, AWS should allow you to use similar settings to SAML. I haven't personally tried it but maybe I should dig into AWS SSO.
Error : Its lopping around,
if the user authenticates then it callback the post request and in that again passport is inititiased which cases repeated redirect please help me out
This happened to me before as well, I had an incorrect setting in my okta config in passport
Could you please integrate cognito identity for authentication for the same?
Hey. Great tutorial. What command were you using to run your server? The screen faded to the browser as you were typing it.
Firgured it out. Needed to install ts-node-dev globally and didn't realise but I didn't have Typescript installed globally either! Then ran ts-node-dev --respawn --transpile-only source/server.ts (from the server folder)
@@ClaytonFussell ts-node and ts-node-dev yes :)
what script to include in package.json to run ts-node-dev?
ts-node-dev, you install globally, you will need: to run: npm install -g typescript ts-node-dev ts-node nodemon ... should do the trick
Thanks for sharing man! I have build it to work along with an open source project called Marquez for lineage events. Everything works fine when running locally but once I deployed to kubernetes cluster, I get an error when this web-server is redirecting me back to Marquez and I get an error response on my screen saying Can not GET /login/callback. Sometimes I get the error Can not POST /login/callback. Do you any ideia of what it might be?
Hmm, I'd have to see the code
req.isAuthenticated() only working in local and keeps on failing in prod any idea?
why are you using localhost:1337 as the issuer instead of Okta's Identity Provider Issuer?
Great question. At the time I created it, I believe I found you could use either. I don't have a straight answer for this. Test it out and tell me the results? We're all learning this together lmao!!
Hey Nerdy, Thank you very much for the video. I am trying to implement Okta's SAML SSO integration with a nest.js backend. I was curious on if you had any recommendations on implementing this or if I could run the same configuration settings with my nest.js backend.
I don't have experience with nest, however if you have endpoints working like this tutorial does I don't see it being a problem.
how the logout will work and the other thing is after logging its not redirecting me back to the App?
Logout is a link that should be provided by Okta
is it possible to access all the domains ex like facebook google and powerschool ?
I haven't tried that, but if OKTA has the integration it might be.
I have another secnario. I have 2 Okta one act as SP and the 2nd as IDP and I have a React Client app.
The SP authentication protocol is OIDC, and the IDP is saml2. I setup the required integration on both Okta for saml2.
The athentication flow is working correctly until it redirect the user back to the main react application.
So SP initiated the Auth request and the IDP verifiy and identify and finally it redirect the user to the React app. at this stage I have no way to get the token and authenticate the user. I need some help here please.
I am unfamiliar with this type of setup. Do you have an example of code in github I can look at?
This is great thanks for this video.
I am trying to implement single logout with okta saml sso. Does anyone have any insights on this ?
Either remove the name from the list or use an okta link to sign out they should provide one
@@TheNerdyCanuck Can you please elaborate more about removing the name from the list
Wish you would have showed setting up the saml pem file.... :/
Can somebody know How I can log out from okta ??
I tried replacing your axios code with a single axiosInstance in a different folder and importing the specific API function but this causes infinite reload errors. Do you know what causes this issue?
I'd have to see the code to know for sure
Hey this a great video. Thanks for making it. I am wondering how can i manage the okta session, accessToken, etc. I am trying to build a logout feature
That's a good question, I think there is a link you can use to logout that okta makes for you. Gotta figure that one out still
Hi,i have used the same project code to work with okta with your help,but i couldnt be able to get the succes respons from /whoami & due to this application.tsx is not returning email,also used my own certificate & entery point too,can you please help me to fix this isue,plz.....
So, if the email is not being returned, it's possible your saml response from Okta isn't sending it. Log the response from the Saml provider and see what it says
@@saiphanindrapedarla1049 Okta only communicates with the backend, it doesn't communicate with react directly
@@TheNerdyCanuck Do i need to configure ./whoami in any of the sections provided in okta configurations steps..?
@@saiphanindrapedarla1049 I'm not sure, can you post your code to GitHub?
Thanks for this great video. I have a question: why does the route '/login/callback', which is called by octa after a successful sign-in, call passport.authenticate again? Does not seem to be necessary.
Good question, let me look into the flow, it's been a while
Hey, This is awesome. I was looking for integrating keycloak with saml protocol in nodejs. This is correct place. Thanks a lot.
Any tips on how to do logout?
help.okta.com/en-us/Content/Topics/Apps/Apps_Single_Logout.htm?cshid=ext_Apps_Single_Logout
This is a guide to create a logout lnk
Bro thank you very much 😊
Great video, but I have a question. Suppose you are not working inside a local host.( the front end does have a domain, but the backend is local) Then the callback url of the Okla application would be the backend which does not have a domain name, how would users login? How can they be redirected again to the backed for the passport authentication?
They would be redirected from the front end I believe if I understand your question correctly.
@@TheNerdyCanuck hi, yes I think you understood. in the end I created 2 subdomains one for the frontend and one for the backend (api). So this solved the localhost issue. Thanks for your help and the video :) !
Very nice video just waiting for graphql project in typescript
I'm going to try graphql and do one in the near future 😎
Thanks for great video, is there any way to pass query string parameters, in my scenario I need to pass some information in query string parameter for react app which is getting lost during redirect?
Yes, I do it with localstorage, but I imagine okta might have a way to save them? I'd have to look
Its amazing tutorial, thanks a lot
Great video! You wouldnt happen to have a dockerized version of this anywhere, would you?
No, but if you build it, you can take that static build folder and pass it to an nginx container. I have a video on react + docker, should be exactly what you need. You'll have to deploy the api as well in the same way.
how can integrate SAML 2.0 using okta Spring boot and react.
ask chatGPT
Thanks for posting this video, does this method also work for Jumpcloud SAML SSO? didn't find any documentation with react node integration with Jumpcloud
Any saml provider should work
Can we do this only with react ?
Unfortunately not with the SAML integration
How do we receive the information correctly from the passport to the server? Greetings
You send it through the requests we program with "whoami"
Hey, this is really great. How about video for signing out?
It's funny I didn't even think of a sign out button, but for that you would simply remove that user from the array on the server side (I think).
It would be nice if there was a tutorial with this for dotnet core.
I have an application for net framework
I imagine it's very much the same looking
awesome bro.. 😀
Thanks ✌️
Hey. How do we implement this as a middleware?
Which part?
@@TheNerdyCanuck basically I want to protect one of my API with the SSO aur middleware.
Do you have a front end as well or is this JUST an api
@@TheNerdyCanuck I want to render react static files through the API. The middleware should authenticate the user first.
@@Ishankulkarni Oh I see, that's an interesting idea. I haven't done it that way, but if you are serving it statically I don't even know if you need the react side of this. I'd have to see the code.
awesome content, picked up a typo that likely didn't impact your test 11:59 "failureReditect"
My spelling is always bad lol
Thanks for the video . very helpful !! Can you please also show how to implement Logout from Okta ??
You're the third person to ask for it, I might have to do it now :)
@@TheNerdyCanuck That will be great !! Thanks
x4
@@TheNerdyCanuck Did you end up implementing the log out? I can't figure it out.
Can you please make a similar tutorial with next js also !
Sure, I can look into it!
How do I integrate jwts with SAML?
Don't, you should use one or the other.
Thanks for you interesting tutorial. I've implemented it and it is working perfectly in local. But in deployed version the whoami request always returns 401.
Let's see the code maybe I can helkp
Thanks a lot :)
Helpful. Can you create a tutorial for saml login authentication workflow from react as frontend, flask as backend, and idp as aws. I am curious to learn the SP initiator workflow.
Technically this is SP initiated. He tries to hit his SP first, then gets redirected to Okta, and Okta responds with the SAML response