How to implement code grant flow in REST API? - reactjs

I am developing web application in React and Django(Rest Framework)., i want to users can login with google account.,
I approach i followed is implicit grant flow.,where i get the access token in the front end., and sent the access token to the back-end. then the back-end should verify the access token with google., and return the new jwt token for future requests. once the user logged out., same cycle continues.,
By My client don't want repeat the same implicit grant flow for other devices(mobile for example)., they want authentication to be handled entirely by back-end. so i am planning to use code exchange flow.
the approach i am planning.
user clicks the login with google button
send the request to django back-end, get the clientId and server callback URL.
client redirect the request to google with the client id and callback url.
google ask permission to users and sends the access token to backend.
In the above approach the connection between client and server is broke in step 3., how to we know the back-end got the access-token. user logged in?

Related

Authenticate in Identity with an external login page

So, we are developing a public rest api that is protected by our own Identity server through an authorization code flow. Somewhere in the middle of the flow, we also implemented a consent step (with a different web app) to grant the Api access to some data that belongs to a user's account of another web app of our own. Currently, the consent page is protected by OpenIdConnect, which login page is implemented in the Identity server itself. However, we want expose as little as possible of the Identity server to the public.
With that in mind, is it possible to implement a login page outside of the Identity server that can still authenticate the user in identity and grant the consent? If so, how?
I will start with just explaining the flow.
When an app redirects a user to Identityserver, they come to authorize endpoint to validate the request.
When request is not valid, that triggers an error.
When request is valid and user is authenticated (has auth cookie) they just go back to the client app with the code.
When request is valid and the user is not authenticated, the next redirect would be to login page. It is the place to check the credentials, set the cookie (for the Identityserver app) and redirect back to the authorize endpoint to go further with consent or final redirect to the client app.
Is the answer crystal clear already? Login page is almost the only vitally needed for Identityserver to make possible setting the auth cookie for any further SSO.
Nevertheless you can delegate the login handling to an external app (one more Identityserver instance?). In that case your front login app will perform the steps (1-2-3-4), set the first level cookie, redirect back to the client Identityserver app, which will set the second level cookie on external auth callback action and finally redirect to the original caller. Is this the scenario for you? Possibly so. The original explanation is a bit uncertain.

How to use an Azure AD SSO access token to sign in on another website on a new browser

I have set up an AAD SSO enabled website A that gets an access token once the user logs in. Now, the user has the option to navigate to website B, but on a new browser that doesn't have access to the session of the browser that website A was opened.
Is there a way for website B (.NET MVC Azure hosted Web App) to be setup to accept the access token (for example: through headers) to authenticate the user and establish a newly AAD SSO logged in user on the new browser? (Users can't re-enter their credentials)
In my opinion, access tokens enable clients to securely call protected APIs, so it should be stored in backend. More often we use refresh token and access token at the same time to prevent the access token expiring.
On the other hand, if I have entered the credentials in one browser, then the identity platform knew the request came from me because some information would stored in my cookie of the website, but if I used another browser to visit IDP, it was impossible to let IDP know the request came from me, because I can't share cookie infomation with different browsers.
I find 2 videos on introducing SSO, I think they will help, here is the link.
Hope it will do some help.

React multiple subdomain auth with jwt

We want develop few different services (React Apps) with the same users database and Rest API.
Some users might have access to APP 1, some for APP 2, some for both depends on their role.
We decided to go on multiple subdomain apps method.
We want SSO so only one page/app to authenticate all the apps and not a local login component for each app. using JWT mechanism in our backend.
STRUCTURE:
AUTH FLOW:
There are two main problems in this flow which are marked as 1 and 2:
Lets say i go to the login app and log in, getting accestoken from the backend.
How do i deliver the token to app1.company.com? should react login APP redirect with token in url param?
local storage is subdomain scoped.
iframe has problems with Safari.
I don't wanna save jwt in cookies for now because the flask REST can serve non-browser retailed clients.
Lets say the user want to go to app2. if we aren't able to share the token from app1 with iframes or any other method, then this app should be redirected to login and make the process again as app1, which is fine for us.
But is this really the way? if token is invalid anymore and we get Error from backend, should we redirect to the login app in the other subdomain (embed the url we wanna go back to after login success)?
Can i just use 3rd party Open id connect service?
Should i consider microfrontends approcah to make the all the "apps" on the same domain?
How "Attlassian" as an example handles this process?
What am i missing and what is the best way to solve this flow?
Lets say i go to the login app and log in, getting accestoken from the backend. How do i deliver the token to app1.company.com?
It is not a problem that login.company.com delivers the token as a parameter in the URL, because the site can verify the authenticity of the token by verifying the digital signature or with a specific endpoint in the central authentication domain. This is how openid/oauth2 does it using the "implicit" flow, although they also allows to send the token as POST, or use a 2-step flow ("authorization_code" flow)
Lets say the user want to go to app2. if we aren't able to share the token from app1 with iframes or any other method, then this app should be redirected to login and make the process again as app1, which is fine for us. But is this really the way?
You can share the token between domains using an internal iframe, but in your case I would recommend that each domain use its own token.
if token is invalid anymore and we get Error from backend, should we redirect to the login app in the other subdomain (embed the url we wanna go back to after login success)?
Yes, in the number 2) of your drawing, just redirect from app2.company.com to login.company.com and follow the same flow as in 1). You will need some type of cookie on login.company.com to avoid requesting credentials from the user again
Can i just use 3rd party Open id connect service?
Yes, you can use an external OpenIdConnect service, or deploy at login.company.com an OpenIdConnect server like IdentityServer or KeyCloak
Should i consider microfrontends approcah to make the all the "apps" on the same domain?
It is not necessary having a central authentication domain
How "Attlassian" as an example handles this process?
I don't know exactly how Attlassian does it, but currently most web services support OpenIdConnect

Getting information of user from oauth2 app having the session token

I'm having I think, a misunderstanding of concepts related with Oauth2 protocol. Right now I have 3 applications:
Frontend developed in React
OAuth2 server developed in Golang (not finished)
Another backend app, let's call it: Bussiness Logic app
At first, the user from react can login in the system using the OAuth2 server, the OAuth2 server sends the token and everything's perfect.
Now, when from the the react app some request is send to the Bussiness Logic App the token is also send in the headers. My question is: having the token, should I be able from the Bussiness Logic App to get information fo the user making a request to the OAuth server? is it allowed in the OAuth protocol?
The thing is that I need to know in the Bussiness Logic App which user is logged in, if it's not allowed, how should I fix it?
No.
OAuth 2.0 NOT an Authentication protocol.
If you need Identity Information you need to use OpenID Connect (which is built on OAuth 2.0)
With OpenID Connect you are provided both an Access Token and an Identity Token. The Identity Token will contain "basic" profile information about the "user". The Access Token may be used to obtain more detailed information about the user from the userinfo_endpoint.

How can I secure the Facebook login?

I've integrated Facebook login to my AngularJS application. The user can login and from that login I get the users ID and an access token.
But I guess I further have to secure my API as anyone, now, could do request with a number (ID) and a token (string) and get access.
My backend is a ASP.NET Web API project.
Is there a service from Facebook (API) that I can call to verify access token and user id? Or do I have to implement some sort of request token system to verify that the client is one of mine?
Any comments on how to verify my clients?
Have you checked this ?
Login Security guideline for fb.

Resources