Тёмный

React SAML Authentication with OKTA and Typescript [2021] 

The Nerdy Canuck
Подписаться 6 тыс.
Просмотров 26 тыс.
50% 1

This one is for those who have the tricky task of being in a situation where you need a React app to be covered by SAML integration. I used OKTA as my SAML provider here.
Enjoy :)
Music by: Tesko / prod. THXMOS
Github: github.com/joeythelantern/Rea...
Chapters:
0:00 Intro
2:04 Base Project
3:34 OKTA Setup
5:23 Client Side Setup
11:09 Server Side Config
17:20 Server Routes
21:13 Testing
#react #okta #saml

Наука

Опубликовано:

 

21 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 103   
@Yf1ash
@Yf1ash 3 года назад
Many thanks!!!! I just needed something quick to test out a saml integration. You're the man !!!
@teddyxfire
@teddyxfire 3 года назад
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!
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
No problem, struggled with this one for a LONG time.
@jakevlogs184
@jakevlogs184 Год назад
Thank you for sharing this, my friend. The video you provided is excellent and provides a comprehensive explanation of all the steps involved.
@avkash3avi
@avkash3avi 3 года назад
Thanks for this man. Great video with a proper explanation of all the steps.
@olmanmora21
@olmanmora21 2 года назад
This has been extremely useful, exactly what I was looking for.
@adilewenstein8370
@adilewenstein8370 2 года назад
Thank you so much for this tutorial! It finally makes everything make sense!
@abhisheksharma9796
@abhisheksharma9796 3 года назад
❤️ Thanks for this. Trying to implement Saml SSO with NextJs and Azure Ad.
@kunal.phaltankar
@kunal.phaltankar 2 года назад
Thank you so much for this simple explanation.
@agrioniot998
@agrioniot998 2 года назад
Hey, This is awesome. I was looking for integrating keycloak with saml protocol in nodejs. This is correct place. Thanks a lot.
@SirCristianoLopes
@SirCristianoLopes Год назад
Its amazing tutorial, thanks a lot
@niteshatkar1195
@niteshatkar1195 Год назад
Bro thank you very much 😊
@saiteja44
@saiteja44 Год назад
req.isAuthenticated() only working in local and keeps on failing in prod any idea?
@vivekgowda1576
@vivekgowda1576 4 месяца назад
Could you please integrate cognito identity for authentication for the same?
@ritikdubey3338
@ritikdubey3338 10 месяцев назад
Can somebody know How I can log out from okta ??
@Prog2012
@Prog2012 Год назад
Thanks a lot :)
@jerrysibarani2709
@jerrysibarani2709 2 года назад
awesome bro.. 😀
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
Thanks ✌️
@usmanmughal5916
@usmanmughal5916 3 года назад
Very nice video just waiting for graphql project in typescript
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
I'm going to try graphql and do one in the near future 😎
@Nickdondo
@Nickdondo 2 года назад
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.
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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.
@johnsanders3380
@johnsanders3380 3 месяца назад
Wish you would have showed setting up the saml pem file.... :/
@andreasbeyer6319
@andreasbeyer6319 2 года назад
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.
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
Good question, let me look into the flow, it's been a while
@mohammadalsoud5292
@mohammadalsoud5292 2 года назад
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.
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
I am unfamiliar with this type of setup. Do you have an example of code in github I can look at?
@erichuang9245
@erichuang9245 3 года назад
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
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
Any saml provider should work
@kiquetal
@kiquetal 2 года назад
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....
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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.
@leonardowildt2613
@leonardowildt2613 2 года назад
Great video! You wouldnt happen to have a dockerized version of this anywhere, would you?
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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.
@ankitgarg6976
@ankitgarg6976 Год назад
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?
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
Yes, I do it with localstorage, but I imagine okta might have a way to save them? I'd have to look
@shehryariqbal5198
@shehryariqbal5198 Год назад
how the logout will work and the other thing is after logging its not redirecting me back to the App?
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
Logout is a link that should be provided by Okta
@joseantoniodavilaperez4954
@joseantoniodavilaperez4954 3 года назад
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
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
It's possibly getting blocked because it's not https, I couldn't be sure though since I haven't used azure.
@mateussouza1768
@mateussouza1768 2 года назад
Hey I'm trying to implement React + spring and azure too. Did you have any success?
@jinshanng1955
@jinshanng1955 Год назад
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?
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
I'd have to see the code to know for sure
@blaaarp4u
@blaaarp4u 3 года назад
why are you using localhost:1337 as the issuer instead of Okta's Identity Provider Issuer?
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
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!!
@bradcook1937
@bradcook1937 3 года назад
awesome content, picked up a typo that likely didn't impact your test 11:59 "failureReditect"
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
My spelling is always bad lol
@karankumar89
@karankumar89 2 года назад
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
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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
@rohithreddy4734
@rohithreddy4734 2 года назад
what script to include in package.json to run ts-node-dev?
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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
@ClaytonFussell
@ClaytonFussell 2 года назад
Hey. Great tutorial. What command were you using to run your server? The screen faded to the browser as you were typing it.
@ClaytonFussell
@ClaytonFussell 2 года назад
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)
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
@@ClaytonFussell ts-node and ts-node-dev yes :)
@polmonroig1182
@polmonroig1182 2 года назад
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
@TheNerdyCanuck 2 года назад
They would be redirected from the front end I believe if I understand your question correctly.
@polmonroig1182
@polmonroig1182 2 года назад
@@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 :) !
@devsonuyadav
@devsonuyadav 6 месяцев назад
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
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
This happened to me before as well, I had an incorrect setting in my okta config in passport
@kushaluk2381
@kushaluk2381 3 года назад
is it possible to access all the domains ex like facebook google and powerschool ?
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
I haven't tried that, but if OKTA has the integration it might be.
@judasiscariot5646
@judasiscariot5646 3 года назад
How do I integrate jwts with SAML?
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
Don't, you should use one or the other.
@mariomoran8084
@mariomoran8084 Год назад
How do we receive the information correctly from the passport to the server? Greetings
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
You send it through the requests we program with "whoami"
@alirizaerfan1969
@alirizaerfan1969 Год назад
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.
@TheNerdyCanuck
@TheNerdyCanuck Год назад
Let's see the code maybe I can helkp
@cheeyapana4175
@cheeyapana4175 2 года назад
how can integrate SAML 2.0 using okta Spring boot and react.
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
ask chatGPT
@rohanpanwar7129
@rohanpanwar7129 9 месяцев назад
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 ?
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
Either remove the name from the list or use an okta link to sign out they should provide one
@CodingTushar
@CodingTushar Месяц назад
@@TheNerdyCanuck Can you please elaborate more about removing the name from the list
@saiphanindrapedarla1049
@saiphanindrapedarla1049 2 года назад
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.....
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
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
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
@@saiphanindrapedarla1049 Okta only communicates with the backend, it doesn't communicate with react directly
@saiphanindrapedarla1049
@saiphanindrapedarla1049 2 года назад
@@TheNerdyCanuck Do i need to configure ./whoami in any of the sections provided in okta configurations steps..?
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
@@saiphanindrapedarla1049 I'm not sure, can you post your code to GitHub?
@achyut4ever
@achyut4ever 3 года назад
Can we do this only with react ?
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
Unfortunately not with the SAML integration
@majkelch
@majkelch 3 года назад
Hey, this is really great. How about video for signing out?
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
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).
@MasterOfCookies8
@MasterOfCookies8 Год назад
Any tips on how to do logout?
@TheNerdyCanuck
@TheNerdyCanuck Год назад
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
@sharvariwaghmare281
@sharvariwaghmare281 3 года назад
Thanks for the video . very helpful !! Can you please also show how to implement Logout from Okta ??
@TheNerdyCanuck
@TheNerdyCanuck 3 года назад
You're the third person to ask for it, I might have to do it now :)
@sharvariwaghmare281
@sharvariwaghmare281 3 года назад
@@TheNerdyCanuck That will be great !! Thanks
@FelipeGuadarramaHerrera
@FelipeGuadarramaHerrera 2 года назад
x4
@MasterOfCookies8
@MasterOfCookies8 Год назад
@@TheNerdyCanuck Did you end up implementing the log out? I can't figure it out.
@VS-nk3cs
@VS-nk3cs Год назад
Logo out Functionality need bro through passport saml
@TheNerdyCanuck
@TheNerdyCanuck Год назад
Logging out, a link should be provided by your SAML provider to go to
@Ishankulkarni
@Ishankulkarni 2 года назад
Hey. How do we implement this as a middleware?
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
Which part?
@Ishankulkarni
@Ishankulkarni 2 года назад
@@TheNerdyCanuck basically I want to protect one of my API with the SSO aur middleware.
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
Do you have a front end as well or is this JUST an api
@Ishankulkarni
@Ishankulkarni 2 года назад
​@@TheNerdyCanuck I want to render react static files through the API. The middleware should authenticate the user first.
@TheNerdyCanuck
@TheNerdyCanuck 2 года назад
@@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.
@abdullahejaz9892
@abdullahejaz9892 Год назад
Can you please make a similar tutorial with next js also !
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
Sure, I can look into it!
@user-py2vo1gz4t
@user-py2vo1gz4t 11 месяцев назад
It would be nice if there was a tutorial with this for dotnet core.
@JesusGonzalez-sc2ds
@JesusGonzalez-sc2ds 9 месяцев назад
I have an application for net framework
@TheNerdyCanuck
@TheNerdyCanuck 4 месяца назад
I imagine it's very much the same looking
@user-mk1xr2gj7k
@user-mk1xr2gj7k Год назад
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.
@C-Doug
@C-Doug Год назад
Technically this is SP initiated. He tries to hit his SP first, then gets redirected to Okta, and Okta responds with the SAML response
Далее
Typescript API in NodeJS / Express in Depth [Part 1]
38:10
A Developer's Guide to SAML
27:47
Просмотров 175 тыс.
МАРИЯ ГОЛУБКИНА О БАБУШКЕ #shorts
00:43
Tom🍓Jerry 😂 #shorts #achayanarmyfamily
00:14
Просмотров 11 млн
Deploy NodeJS Apps with Typescript to Heroku [2022]
10:19
Publish your NodeJS Typescript Library to NPM [2022]
8:43
Why Signals Are Better Than React Hooks
16:30
Просмотров 464 тыс.
An Illustrated Guide to OAuth and OpenID Connect
16:36
Просмотров 567 тыс.
Samsung laughing on iPhone #techbyakram
0:12
Просмотров 656 тыс.
iPhone 16 - НЕ СТОИТ ПРОПУСКАТЬ
4:50