How to authenticate Gatsby Site for all pages using passport? - reactjs

I have a Gatsby-React application in which I have enabled passport authentication with express server. How can I enable the passport authentication for all the pages for my gatsby application. The folder structure is as follows
app.js //Express server using passport stratagy
src/pages/welcome //Passport authentication is called when navigating from this page to profile
src/pages/profile //redirects to this page after authentication
/about //No Authentication
/index.js //No Authentication
src/components //My components folder
gatsby-node.js
...
As you may noticed that when we try to navigate to profile page from welcome page it authenticates by redirecting to the express (app.js) server strategy. Subsequently passport callback redirects to the profile page and it receives the user information. First wrong thing with this approach is that the app allows me to visit url.com/profile page when directly giving the url.com/profile in the address bar (Obviously the profile page will not have the user information).
To handle this I'm planning to give authentication for all the pages (including home page, about and welcome). So how can I effectively authenticate all the pages (if not authenticated).

Related

How to redirect user on another page in same project using aws amplify

I have deploy my react panel on amplify as well as created hosted zone and already connected hosted zone with amplify.
There is two login screens in my project admin login and seller login.
Path of both pages according react routing /login for admin and /seller-login for seller.
I also created two subdomain on amplify admin and seller
I want redirect user when hitting admin.xyz.in to admin login screen, as same when hitting seller.xyz.in user should redirect on seller login screen..
Expected URL for admin login:- admin.xyz.in/login
Expected URL for seller login:- seller.xyz.in/seller-login
How should I solve this redirection problem

Navigating to deep route not working in case of Angular application

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.

How to go to returnUrl after login via an external 2FA site?

I'm doing the Auth feature of a React app to redirect user to a 2FA login page if they didn't log in. After they login successfully, I need to redirect them to the previous page they're visiting on. This can be done easily if the login page is within my app. But because 2FA is an external page and it just redirect user to my homepage only, I have no ideas how to accomplish this.
I made an example here:
My React App: https://test-auth-target.vercel.app/
The 2FA page:
https://test-auth-2fa.vercel.app/
Steps to reproduce:
Let's go to https://test-auth-target.vercel.app/bar or https://test-auth-target.vercel.app/foo, it will redirect you to 2FA page if your tab doesn't have access_token in localStorage.
Then on 2FA page, click Login to simulate you logged in successfully, it will redirect you to my React app, but only homepage.
How could I make browser redirected to /bar or /foo on my app?

Azure active directory redirects to landing page always

So, I'm developping a react app with Azure Active Directory authentication. The react app internally uses HashRouter. My url looks like this
https://example.com/#/
Now when the user clicks on this link from an email he would go through the azure authentication and if authorized will be redirected to the landing page which is
https://example.com/#/
However, if the user clicks on a link that looks like https://example.com/#/xyz - this still redirects to https://example.com/#/ and not to the page xyz. I think this is an issue with incorrect replyurls but I'm not sure.
Any help would be appreciated!!

Redirect to dashboard from home page based on user cookie

What I am trying to accomplish should be straight forward but since I have no experience in web development I would be more than happy to get some insights on best practices to accomplish user redirection from home page to dashboard if user is logged in.
Home page is a static WordPress site which is run in a docker container.
Dashboard is a single page application developed with AngularJS.
Nginx is used as a reverse proxy.
Authentication is basically a JWT. When user loggs in JWT is stored in Cookie.
If cookie is set user should be redirected to dashboard. Otherwise home page should be returned.
Should I configure Nginx to check for a cookie when accessing domain.com/ and redirect to app.domain.com if cookie exists?
what you are describing is a scenario where you need to go to home page and check whether User is Authenticated there, and redirect -before showing the homepage- if the user is authenticated from within the homepage code.

Resources