Completely stumped on an issue I'm dealing with, and I feel like I've looked everywhere, just can't wrap my head around it.
I've got an app that's built as follows:
React frontend, built using Create React App
A separate API, running on a separate server, which the frontend interacts with via RESTful calls
Auth0 handling auth, using a SAML connection. Authentication is successful against the SAML connection.
App is hosted on Heroku, and uses the #mars/create-react-app buildback.
The issue I'm experiencing is that after the SAML authentication, there is a redirect back to my app as a POST. My app doesn't know what to do with said POST, and I'm unsure why.
The ideal scenario I'm looking for is:
User visits domain.com/login
User is redirected to SAML IdP, which asks for login
User logs in with IdP, and is sent back to my app, preferably just to the path /explorer. This should all be straight GET.
I'm happy to post any code related, but unsure what would be the most helpful. Despite me having set the SAML protocol binding to "redirect" on Auth0, it continues to post back to my app. I might simply be misunderstanding that piece, however.
Again, happy to post whatever code would help, just unsure what's most useful to see. Like I said, it seems that auth is working, just that after the authentication, there's a POST back to my root, and my app has zero clue what to do with it. There is no nginx config to speak of.
Thanks for any tips or hints about where to look.
Quick followup. Solved this (I think) by spinning up a simple Express server to serve the React app with, and routed POST / to index.html, which seems to have worked for now.
Related
I think this could be reproduced on any .NET 6 capable machine, within 1-2 minutes...
Context
I am trying the get work the ASP.NET Core 6 React SPA template with Identity authentication.
Based on the Authentication and authorization for SPAs which is updated a few days ago I had run:
dotnet new react -au Individual
I did not modify the application, according the corresponding web page, it is not necessary.
As far I understand, the MVC part is providing the UI for sign-in + have a protected API for Weather.
The app launches, and I successfully register a new user, and successfully log in and out. The UI for this is provided by MS Identity within the application, backed by Duende.IdentityServer assemblies. The client React SPA also seems working, for example Counter page works.
However the only interesting part (for me), the JWT, where the React SPA calls the API after acquired a valid JWT token does not work. This is the Fetch data page.
Debugging with Fiddler, I see the HTTP 401, with Bearer error="invalid_token", error_description="The issuer 'https://localhost:44412' is invalid"
Although I understand what this mean, both the React App and both the API runs on https://localhost:44412, who else could be the expected issuer than https://localhost:44412?
Also the dozens page article not even mentions any necessary modification in the generated template.
Question
What am I missing here. Obviously I am not an authentication expert, the whole idea would be to quickly got and idea by learning from a working best practice example...
There is a lot of examples how to implement OpenID Connect auth. in Node - code grant (+ client password).
There is a lot of examples how to implement OpenID in React (SPA) - code grant with PKCE
Even I know that PKCE it's rather secure, however I feel bad to relegate authentication solely on client side.
Every React SPA has backend (at least it should be hosted somewhere).
I want to have server side in Node (Express) to securely save client password and make all heavy lifting with Identity Server and
React for front-end.
As I already said there is a lot of examples of "Node (Express) with template engines" for authentication.
But I want to use React as "template engine".
So, I am looking for full and correct implementation of it. Meanwhile I cannot find it.
Can anybody help me with it - to find an example?
You need some actual protection in the SPA / browser though, and the 2 common options are:
Plug in OIDC Client Library to do the heavy lifting, so that you don't write much security code yourself. This library runs a number of strict security checks before accepting tokens.
Use a proxying solution that results in your SPA getting a cookie.
For an SPA this tends to be a more of a home grown solution rather than a standards based one
RESOURCES OF MINE FOR OPTION 1
SPA Security Code
Explanatory Notes
FOR OPTION 2
You could use the Open Id Client Node JS Library server side, and follow it's guidance.
I've found 2 solution on the Internet.
The First :
Implement social authentication with React + RESTful API
On the frontend, get the 3rd party app’s login popup to appear.
(Still on the frontend) Grab the authentication token the 3rd party app returns after >agreeing to login.
(Yep, still frontend) Send that token to the backend as part of the body of your >request. (I like to use Blobs, but that’s just me.)
On the backend, verify the token.
If the token is authentic, you will receive the user as part of the verification >response (at least that’s the case with Passport.js, which we’ll be using).
Save the user’s data to your database.
Return a JWT token to the frontend. What you do with that token is out of scope for >this tutorial, but it should probably be used to authenticate each of the logged in >user’s actions.
Very well explained, with github working example social-auth-example
It's only for social authentications, but I think no problem to make something more general or at least to add my OpenID Connect Auth. provider.
The second example:
React Authentication with Twitter, Google, Facebook and Github
This approach uses socket.io. Very interesting.
P.S.
So, I need to figure out what solution is more secure and if there any security breaches.
Not easy task to do. It's so pity, there is no standard flow for my problem. I can find 1000 reasons why it's better to make all heavy lifting on back-end and not to rely on OIDC Client Library. The first reason is my boss :)
Before my question, it's important to note that the app I'm working with has been given to me pre-built with little documentation. Long story. I've never worked with a serverless application before, hence my complete confusion.
Here's some context:
I have a serverless application: React app that sits in a S3 bucket, being served by AWS CloudFront. It uses Auth0 for authentication. Currently, the logic is, if a user tries to visit the app's domain, Auth0 pops-up with a login prompt. The user enters their credentials which is then sent to an AWS Lambda function, which exchanges the confirmed login credentials for a JSON web token. This is sent back to Auth0 which then redirects the user to the app's domain (Please critique this explanation if you think I've misexplained something).
I'm trying to test Auth0 locally so that I can access the roles I've assigned to each user to eventually serve that user data specific to their role.
Problem:
However, I'm unable to test Auth locally. When I run npm start at localhost:3000, I'm taken straight to the main page, skipping login entirely.
I understand this could be because of numerous things, but here's what I've tried.
I've gone to my Auth0 dashboard, and under Allowed Callback URLS, i put http://localhost:3000/logincb. (logincb is the callback given during the AWS Lambda step).
I tried using ngrok to create a secure connection and then putting this url in Allowed Callback URLs, still no Auth0 pop-up on localhost.
I tried putting in conditons in the Lambda function if the request url is localhost:3000 i.e do the exact same thing as you would if the request url was the app's domain name
I can post the Lambda function if that's helpful. It's similar to the examples given on AWS Lambda's docs for example functions when using Amazon CloudFront. It has functions for handling cookies, webtokens, post request to Auth0, etc.
I apologize for the vagueness of the question, I just need some inspiration/ideas at this point.
Peace and love
I am currently developing a small application with a couple of endpoints in nodejs and an angularjs frontend.
At the moment I have an endpoint for users and another one for events. The thing is, I was thinking of making all the GET methods require auth, so that someone that isn't logged in can't access the system, for that I thought of using PassportJS.
Anyways, my question/s would be the following:
What auth strategy should I use? Basic, OAuth or another? Why would that be? I mean, I understand how their flow works, but I don't know why one or another would be appropiate for my app.
Should the endpoints require auth or should it check cookies/token or something else in the session? I'm completely new to this, so I don't even know if this question makes sense.
In any case, I would appreciate any overall insight in the topic since I don't have any experience in developing applications with auth and security.
Thanks!
You have to provide more details about your authentication needs in order for someone to give you a definitive answer to this broad question.
Based on your question, one can assume you don't have any requirements though, therefore I could suggest JWT (JSON Web Tokens - https://jwt.io/)
There are nodejs libraries that can help you create, decode, verify JWT tokens. (such as jsonwebtoken). You can find more details about it on github.
Once someone is logged in, you could pass this generated token back to the client which could store it in the browser's session.
The token can be used in subsequent requests by appending it in the request header.
On the server side, you can add a custom auth middleware to the routes that require authentication, which will verify the token's validity and call the next middleware for the current route.
I recently got started with Google App Engine. I intend to use Flask to serve web pages and the Endpoints API, preferably with the Endpoints-Proto-Datastore for everything else.
From the beginning, non-Google Authentication mechanisms on GAE seem like they need some work. I'd appreciate any light shed on issues I've found so far:
Custom Authentication
If you can write an Open ID provider as part of the app, use something like Python-OpenID and also implement a consumer in the same workflow so it appears like regular login. This way it integrates nicely into what the GAE Users API provides.
I'm guessing if this is done right, users.get_current_user() will work just fine.
If you want to skip writing your own OpenID provider and instead write an email/password auth system using Flask-Login integrating with NDB, that should be alright too. However, one puzzling bit of info in the GAE documentation says I can instantiate a user object like so:
user = users.User("XYZ#XYZ.com")
However, (there is no user.put() method here) a users.get_current_user() still returns None. So what would the use of constructing the user object ever be?
Endpoints Authorization
On including a user=required in the method decorator for an Endpoint-Proto-Datastore rolled API, OAuth seems to work right away - all you have to do while testing it in the APIs explorer is to turn on the OAuth 2.0 switch and pick a valid Oauth 2.0 Scope. So does that mean that if we implement a OpenID provider that integrates with the Users API correctly, it won't be sufficient to use the OAuth magic of Endpoints API?
Here too, it seems like constructing a user object will not help satisfy the authentication requirement.
How would custom authentication / another OpenID implementation work with Endpoint API authentication/authorization?
I wanted to not use oAuth, but a simpler form of Authentication with user/token.
So what I've done is create a custom ServletFilter that maps to /_ah/spi/* and intercepts login information from the HTTPServletRequest there, if it is an Endpoint-API-Request.
Seems to work thus far, but am not really sure if that is the way to go. But as I've found no examples for non-oAuth-Auth anywhere, that's currently my best shot.
Would love to get some best practice hints from #bossylobster or #Dan Holevoet.