I have single page app and service stack as service on different domain name (cors). what is correct way to authenticate angular spa app?
TechStacks is an example of an AngularJS App that supports Twitter and Facebook Authentication.
Another minimal example of a Single Page App that has a number of different AuthProviders enabled is AWS Auth, whilst the HttpBenchmarks example provides good documentation walking through setting up Authentication + Registration in ServiceStack.
Related
We are in the process of setting up a project that requires mobile and web app authentication and were wondering if there are any best practices for implementation.
For the backend we are currently using django rest framework with a knox token authentication and for the web frontend react.js. For the future, there will be a mobile app in react native.
We want to set up the authentication now so that it supports the react native mobile app in the future. However, I have seen that Knox authentication does not work for mobile apps straight forward as it uses csrf token.
So I'm wondering if there are any best-practices for mobile app and web authentication that specifically feature good documentation, multi-device login and smooth extensibility of login options (fb, google etc) for the current setup drf and react.js/react native.
I'm grateful for any guiding hints.
AWS Cognito seems to be a solution to your problem:
Typically, your users get tokens via an external UI provided by amazon (not really customizable) or by calling the Auth API within your React UI.
Cognito sends access_token, id_token and refresh_token to your react app. You need to pass the access_token to your drf backend (similar to knox token authentication) and validate it again via amazon.
Check out the official docs for React, check out this tutorial for django (it helped me a lot!).
I have some trouble understanding the MSAL authentication and authorization. I have a single page app developed in React. I have setup the MSAL Azure SSO authentication by registering the web app on the Azure AD. Now, I have a Web API (in .Net Core) which is running on a separate app service. How do I integrate the authentication from my React app to the Web API?
Few questions coming to mind:
Do I have to register the Web API app as well similar to my React app?
Do I have to pass the auth token from my React App to the Web API?
Do I have to setup the authentication only on the Web API side (using MSAL.Net) and the React App will connect to it?
Please share your thoughts. Let me know if I can explain any better.
If you are the author of both react app and web API, you can register just one app and use ClientId for both.
Yes. If your react app is standalone app (not a part of Asp.net app) you can use msal.js to login with AzureAD and then use openId token to login to your web API. Also you can use access token to access services secured by Azure (e.g. Microsoft Graph) directly from React.
If your React app is a part of Asp.net app, you can setup Auth on server. If it's standalone app you need to use approach from 2.
If your React app is standalone app and if you are going to access "downstream" API (like Microsoft Graph) from Web API, you need to implement On-Behalf-Of mechanism on your Web API. In two words:
- user login with React app and access Web API with openId token;
- Web API acquires new access token based on token sent from client
- Web API access Microsoft Graph with this new access token.
You can find Server side example here.
Client side example from another answer works in this case, but you need to send row openId to Web API instead on access token.
P.S. You can use access token instead of idToken to access your WebAPI as well, but in this case you need to define separate scope for your WebAPI in Azure as well. After that you can use this scope to access your WebAPI and separate set of scopes to access MS Graph.
Here is a complete video tutorial and source code on how to use MSAL with React to call Microsoft Graph.
The only different in your case will be that instead of calling Microsoft Graph, you will call your own API.
Bottomline is - there is no direct integration package yet for react. Which can also be read from the official statement on the msal-js repo:
After our current libraries are up to standards, we will begin
balancing new feature requests, with new platforms such as react and
node.js.
See Here. It allows you to call Graph API from client side.
I need your guidance/suggestion on the scenario I am into.
We have a legacy GWT application(version 2.7), this application has 2 controllers which implement EntryPoint class - LoginController and OTSController. These have their respective presenter and viewer.
N.B. - this GWT application runs as a spring-boot application.
This GWT application is a ui application(and there is another spring-boot application which would act as a server app). The GWT app uses default way of handling user authentication i.e. using /j_spring_security_check.
Now I am trying to re-write the Login functionality in React(and I am quite new with React). I am trying to use oauth2 for authentication, can you please point which oauth2 library I should use and is their any sample which I can look into.
I have searched for authentication for React web-app and seen examples for -
Okta Sign-In Widget
Auth0 - provides authentication-as-a-service
Stormpath React SDK
JWT(JSON Web Token)
But couldn't find any specific js library that gives oauth2 implementation(and which doesn't have much strict license obligations) that I can use in my react app, please give me pointers so I can use any existing/implement oauth2 authentication for my Login page(using react).
Thanks,
Saurabh.
You can use these two libraries from Okta for integrating authentication into a React app with Okta - #okta/okta-auth-js and #okta/okta-react. You can also checkout the guide here - https://developer.okta.com/code/react/okta_react. Hope this helps.
I have an application built by a previous developer that uses OWIN middleware with both cookie and OAuth tokens. It is an ASP.NET MVC app that is only using MVC views/controllers for login and a home view that hosts an entirely separate Angular app.
Bearer tokens are used to authenticate to the API once the app is entirely loaded but an auth cookie is used to load the initial scaffold MVC home view enclosing the ng app.
My issue is having a business requirement to allow users to login with unique credentials per browser tab therefore cookies cannot be used but simply use a session-based token to keep them separate.
Can an ASP.NET MVC app fundamentally operate without cookie-based auth?
If I can remove cookie auth and rely on tokens only this will solve my issue of having to rewrite the angular outer frame in solely angular code and reimplement login pathway.
A note: I am implementing IdentityServer3 and I found all samples there and elsewhere always have cookie auth as part of the mix thus my question here.
I think what you want to do here is the following:
Add an [AllowAnonymous] on the Home controller
In the application that is loaded by the Home page, use a browser side package like oidc-client to perform a user login. This will return an id and an access token.
Inject the access token in you REST service requests.
Use UseIdentityServerBearerTokenAuthentication to filter and authenticate bearer tokens in the WEB API server.
I'm building app with sails framework and some parts of it requires authentication based on session (like going to some pages of app). But I don't have a lot of cases when session based auth is needed. Most of app is based on single page with angular connecting with server RESTful way so there I need token based auth.
There is no many resources explaining how to do it.
here it's explained how to do REST based auth, and here it's explained for session based auth.
Anyone of you know some example how to 'merge' both of those methods?