Usually you've got an app
needs user authentication + admin module.
I don't trust manage all my app with a single page
and I don't like to have the hassle to manage
the auth with angular
so I usually divide my app in three
admin
default
login
What's do you thing about it ?
I use two apps Home and Panel:
Home: website, contact us, usual stuffs and login, single-page app on /# .
Panel: for the admin panel, single-page app in /panel# so that I can check session on the backend, any template needed by Panel is protected by auth filter also any backend API call. It's a good approach to use csrf checks too.
Related
I have a angular application with URL: https://abc.xyz.com hosted within Azure App Service. This has a backend API hosted using a separate Azure App Service and different URL: https://xxx.yyy.com. Both the endpoints are registered with AzureAD. Only authenticated users can login into the application and all the requests to the API has to pass the token via the header from the frontend services layer.
Lets say there is a route within the application: https://abc.xyz.com/#!/test/100
Now when I open a new browser instance and try the above URL, it asks me to follow all the steps required for AzureAD authentication and navigates me to the landing page:https://xyz.abc.com instead of https://abc.xyz.com/#!/test/100
In this case I am expecting user to be navigated to the requested route : https://abc.xyz.com/#!/test/100 instead of taking him to the landing page: https://abc.xyz.com/ post authentication process.
Can anyone provide their guidance regarding this scenario?
Please check if below points give some idea.
AFAIK, the default behavior is to redirect the user to the original
page i.e; the redirect url mentioned in the app registration process,
as microsoft identity basically checks the state whether is protected
by Azure AD before the location is changed to other path than that.
Please check this blog on Redirect to a custom login page when
securing your Angular app with MSAL - Waldek Mastykarz to try the
page redirect to the path previews required.
You may also try adding another redirect url of that path in azure
ad portal.
If I use the Hosted UI in App Client on Cognito, the redirect works perfectly. However, if I create my own login pages, it doesn't redirect to the site I want.
This is in a Single Page Application using VueJS and I have also tried with React. The sign in page works, and it signs the user in, however, I expect that it will automatically redirect to the redirect path I have set in the Cognito as that is what happens when using the Hosted UI in Cognito. However, it doesn't redirect to that site and I am unable to login to the redirect site.
It appears that the Hosted UI handles all of the authorization and is able to pass the needed credentials to where it can login to the redirect site.
Perhaps I am just using this wrong? I need to have custom sign in and sign up forms, so I can't use the Hosted UI. But I need the Sign In to redirect to the external website and handle all of the login credentials where the user will be authorized and logged in. Hopefully I explained that ok...
Any help would be greatly appreciated. Again, I am well versed in how this all works... Thanks.
Once you use Hosted UI in Cognito, provides you an OAuth 2.0 compliant authorization server. If you don't use the hosted UI , you have to build this capability your self for the Oauth flows (ex - implicit, Authorization code etc) along with the callback/redirect functionality.
Just to note the hosted UI can have a custom domain and the styling can also be adjusted, please check here.
I've started building a prototype for a front-end layer with single-spa. The layout is very similar to https://github.com/react-microfrontends, which means:
Root config
A navbar (React)
Two apps (Both React)
A Styleguide module
An API module to handle communication with a set of API
I managed to get a basic prototype running, but I now need to implement some OAuth2/OpenID based authentication, and I'm not sure where to start. I need the user redirected to a separate URL (Auth0 style) if not authenticated or not having a valid JWT, then I need a mechanism of token refresh whenever the auth token expires. On top of any general advice on best practices, existing examples and so on, I have some specific questions I can't quite work out.
How can I redirect the user to a different URL when not authenticated? Which of the modules/components should be responsible for it?
Is there a library that implements OAuth2 out of the box? In particular, I'm interested in some sort of automatic token refresh.
What is the best way to make sure an unauthenticated/unauthorized user cannot access the app bundles?
Thanks in advance.
The typical approach would be to set up an Auth microfrontend that would :
handle credenials retrieval upon login. Be it via Password flow or OAuth ( in your case). Since you are using React, your OAuth provider should have a library that you can use within the Auth MFE to interact with it. If it's keycloak, React Keycloak is a good fit. There's no rule lf thumb here.
pass the credentials to your two React Apps ( Microfrontends) and the API module via Browser storage or shared state.
Doing so, the API module would set the credentials in the API calls. and the two react Apps would check credentials presence before proceeding with their inner logic.
refresh credentials on expiration or log out user ( depending on your logic ). Loging the user would mean deleting the credentials from browser storage for example.
redirect to one of your react App after login. That means the Auth MFE route should always be active in the root config.
I hope it helps. Here I have summarised the flow.
More of it on my github account https://github.com/exaucae/single-spa-patterns/blob/master/AUTHENTICATION.md
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 am using UI-Router in my Angularjs app on Apache. I want to use subdomains for user profiles. How can I change http://example.com/variable to http://variable.example.com and trailing urls.
Is there a way this could be done using htaccess?
So when a user logs in your server side code should redirect them to their subdomain with an HTTP 302 redirect. Once there, the angular app can load. Note that changing the hostname will cause a full page reload (your angular app will start over), so you could do this for login but you wouldn't want to do this if userA is allowed to visit userB's profile as angularjs is optimized for single page applications and using subdomains like this would make your app a multi-page application.