Does anyone know how to set up OpenIdConnect Auth using Azure Active Directory and React SPA without storing access token in the broswer - reactjs

I am trying to build an app where users can sign in using their work Microsoft account through open id connect. All of the documentation on Microsoft seems to suggest that for React/SPA apps you should use the MSAL library to authenticate users but this seems to cache the access tokens directly in the brower through session storage. To my knowledge this is bad practise and a backend for frontend approach should be used for this scenario instead where the access token is stored in a HTTP secure cookie.
Does anyone know how to do a backend for frontend type approach using Azure Active Directory? Is there support for this using Microsoft Api's or do I have to just write the code from scratch?
Thanks for any help

You need to use a server side solution to issue application level secure cookies. It is not specific to Azure AD.
The Duende BFF solution is .NET based, and uses the web host, eg https://www.example.com, to issue cookies. See this code example and the docs.
It is also possible to issue cookies via a utility API that runs in a sibling domain of the SPA, eg https://api.example.com. This is a little more complex, but provides options such as deploying the SPA to a content delivery network - see this code example.

Related

Methods of Authentication in Go for App Engine

I am building a reservation system in Google App Engine using Go. I need 2 forms of authentication in my program.
Public Form -- form built in Angular that is on our public website. I want my front-end to have some sort of credentials.json file to use when requesting the book and getOpenDates endpoints in my RESTful API running in Go on Google App Engine.
Private Companion App -- protected by username and password that the user supplies in my app built in Flutter. The app is requesting many endpoints in App Engine. I would like to use JWT to authenticate this portion, but I'm not 100% sure JWT is what I need.
I'm not sure if this tutorial on Identity Platform is what I want. I'm very new to App Engine and authentication in general, so I am a bit lost.
Please describe how I could implement these authentication methods in my RESTful API in Go running on Google's App Engine. I think I may be able to implement the username/password method using a tutorial like this but I'm very lost on the 1st form of authentication with just a credentials file as authentication. If I'm going in the complete wrong direction to accomplish what I want please tell me, but what I'm looking for is code or a tutorial describing how to authenticate using these 2 methods. Thanks for any help.
From what I understand, you want to have a golang backend API in App Engine that serves both your web frontend (1.) and your users app (2.).
I am going to suppose that any user with username/password can use both your frontends: the web app and the mobile app with these credentials.
The credentials.jsons are not designed to authenticate users of your services, but rather server to server communication.
With that in mind, I have found the guide Session based authentication in golang, that could help you to set up your backend to accept only authenticated requests over HTTPS. The web browser will automatically save the cookie, however you need to store the cookie in your mobile app.
For much more complicated scenarios for authenticating from different webpages, it is required to use OAuth2 as you can see in this thread. If you don't find any of your requirements listed in here it is probably overkill to use Auth0 nor OAuth2.

Azure AD Authentication of Angular app with MVC Core on Azure AppService

I'm investigating options for adding AzureAD authentication to Angular SPA application with .NET core backend. I'm using VS 2019 MVC project with Angular (same as dotnet new Angular is producing). It's using .NET Core 3.1 and Angular 8.
From what I learned so far I have 3 options:
Built in Azure App Service Authentication
Adal.js - looks like the older brother of,
MSAL.js - which after making it work locally with Azure AD I learned on this page that "At this time, AAD V2 (including MSAL) is not supported for Azure App Services and Azure Functions. Please check back for updates." I couldn't make it work on Azure today so maybe this Note is for a good reason.
EDIT: Interestingly now point 3 works for me on Azure App Service so I'm not sure what this note means.
My requirements so far are that no screen is accessible to users unless they log in and that I will be able to read information about them from Azure AD - Roles, groups.
I never worked with Angular and I don't have any experience with Azure AD and I need someone that implemented it already to at least tell me which option I should choose and I can go from there.
My requirements so far are that no screen is accessible to users unless they log in and that I will be able to read information about them from Azure AD - Roles, groups.
I think the option 1 could meet your requirement, the configuration of Azure AD in Authentication / Authorization is higher than your code, the user could not access the app unless they log in.
To read the information about the roles, groups, you could check this good blog.
Here you have an angular E2E auth scenario using App Service built in authentication:
https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad
I believe the part you are interested in is this one:
Enable authentication and authorization for front-end app
This way app service is the one redirecting you to AAD and getting a valid token that you can just pass in to your APIs afterwards. If the APIs are hosted in App Service as well, then APP service will be the one validating the token for you, so your backend code does not need to worry about authentication (you still need to handle authorization)

What is the best way to secure a mobile application and a Microservices backend archtiecture

I am currently working on a mobile application that will allow a user to sign in via username/password (OAuth 2.0 Password Grant), Facebook, Twitter, or Google. The backend for this mobile application is coded in Spring Boot/Cloud (Java) and makes use of Microservices principles. I have several small services that are discoverable via Eureka and make use of Spring Cloud Config for centralized configuration. They are all exposed to the Mobile device using Spring Cloud Zuul, which acts as a reverse proxy. The Spring Security OAuth 2.0 setup that I have takes in the username and password then returns a JWT token, this token is validated every time a request is made to the backend. I also store users locally in MongoDB and make use of Method Level Security. I want to add Social Login to my application and have it do the following:
On the Mobile Device do the OAuth dance and get an access token
Send the access token to the server, and using Spring Social create a new User locally and associate it to Facebook/Twitter/Google, and then return a JWT token that can be used to validate requests
This JWT token should be created by Spring Security, and I should still be able to use Method Level Security and have local users
Basically I want all the features I have with my custom Spring Security OAuth 2.0 Password Grant with Social Login
This is my first attempt in architecting a system, and therefore am looking forward to responses from those with much more experience than I have. I have seen many examples that use Spring Social, but all of them are for Web Apps, not for Mobile, this is where I am currently stuck at.
The questions I have are the following:
Is my suggested approach adequate? Are there other approaches that are stateless and better for mobile applications?
Is Spring Security OAuth 2.0 and Spring Social Security enough to accomplish this? If so, are there resources that I can use? I have not found many online.
Could Spring Cloud Security be used as a solution?
Should I consider using a 3rd Party provider for Authentication such as Auth0 or OKTA?
using OAuth2 for a stateless solution is in my opionion adequate, because of:
oauth2 in general is a protocol designed to be usable in every client, which is able to perform http requests. Since the social nets you mentioned all support OAuth2. If everything goes bad, you still can consume them manually respecting the oauth2 specs, which they implement.
in general I see a problem with "authenticate with XXX and use that token as JWT for my requests". This is not directly possible, because that token is for their resource servers. Instead you need to separate 2 processes: authentication and authorization. In short you can use the socials endpoints to authenticate a user in your backend, which leads to a second oauth2 generation from your authorization server. This can create a JWT using all features from spring-oauth.
This libary should used in addition, since it helps to setup a application wide security solution. As example, you keep an own authorizationserver (which authenticates using social login) and several resource servers. spring-cloud-security helps to build things on top of that, as Zuul SSO, hystrix+ribbon powered feign clients respecting oauth2 authentications and so on
I don't thing this will help you, because those services primary serve you as an identity provider, while you are going to couple your users identity over social networks
I hope I could clarify your question in some way
I have achieved it by referring two spring example applications. Check this
steps, you will be able to achieve social sso login with Zuul, Auth-server and multiple back-end REST projects.

API authentication with ADFS and Angular.js

I'm tried to build a new rich application and i'm having some problems designing the authentication process.
I've only two requirements :
An API needs to be available
An ADFS needs to be used to authentication
My first thoughts was to build the API and to use Angular.js for the frontend. However, I can't see how the authentication should work.
My API needs to be available though scripts. As far as I saw, the ADFS authentication always display t the webpage for the authentication process.
API are usually secured with OAuth2. We used an client id and a client secret to generate a token. But I can't have this behavior with an ADFS.
The only solution I see is to provide two authentications behavior with my application. One with the ADFS for the web access and in the web interface, add a possibility to generate a client id and a client secret associated with an user account that could be used for the API to the headless authentication.
Someone has already faced this kind of scenario?
Thanks a lot!
I assume the 'ADFS needs to be used for authentication' really means 'users should be able to use their Active Directory domain credentials to authenticate'.
If that is the case, you should take a look at Thinktecture IdentityServer. It's an OAuth2 authorization server that you can use with a Active Directory identity provider.
P.S. ADFS 3.0 that comes with Windows 2012R2 only supports the authorization code grant, which is not suitable for JavaScript apps.

Forms authentication with hybrid mobile apps

We are the process of developing a android phone app using IONIC framework and Web Api as the backend.
My question is ,is it sufficient to use Forms Authentication along with SSL to keep the phone app secure.
Our background is in Asp.Net web development and we could not see any examples that uses Hybrid mobile app development along with forms authentication,that makes me wonder if we are in the wrong track.
We implemented CORS along with WithCredentials both on Angular and Web API side, and the authentication piece seems to work fine for all subsequent calls in debug mode.
Do we need to take additional steps for security ,since its a phone app ?
Edit: I was reading about bearer token authentication with Web Api, is this a recommended way to go with phone apps ?
Thanks !
Yes my recommendation is to go with bearer tokens not with forms authentication.
You need to use OAuth 2.0 Resource Owner Credentials Flow which means that end-user provides the username/password only once for a specific endpoint i.e(/token) and then if the username/password valid you obtain something called Bearer Access Token.
This token is valid for specified period and you can configure this in your Web API. Once you obtain the access token, you need to store it securely in your android/hybrid app, then you keep sending it with each request to your web api protected end points using the Authorization header (Bearer scheme). I've written very detailed post which covers your scenario 100%. Please check the post Token Based Authentication and another one for authentication with AngularJS authentication which should work with your case. Let me know if you need further help.

Resources