There is a login page on my React site which has this url (locally)
http://localhost:3000/login
When the user logs in, the server returns a bunch of information about the user including a list of companies, each of which has a subdomain element. All of this data gets put into localStorage upon logging in.
My goal here is that when a user logs into the site, they will get immediately redirected to the home page but with a subdomain matching the first company in their list of companies returned from the server.
This is what have so far:
const getSubdomainHref = function() {
const storedUser = JSON.parse(localStorage.getItem("user") || '{}')
let newHref = window.location.origin
if (storedUser.companies.length > 0) {
newHref = window.location.protocol + '//' + storedUser.companies[0].subdomain + '.' + window.location.host
}
return newHref
}
export { getSubdomainHref };
import React, { useEffect } from 'react';
import { useNavigate } from "react-router-dom";
import { getSubdomainHref } from "./../utils";
//other code
useEffect(() => {
if (user.user_type !== 'anonymous') {
let newHref = getSubdomainHref()
navigate(newHref + "/");
}
}, [user, navigate]);
This is not working, What happens when I log in is this.
Initial page:
http://localhost:3000/login
Resulting page: (note, the subdomain returned is 'cbd')
http://localhost:3000/login/http://cbd.localhost:3000/
how can I make this work?
Note, as I write this, I just had another thought, that being the problem of the localStorage from "localhost" not being readily available at "cbd.localhost". I'm not sure if this is a problem yet but it might be.
The issue here is that the react-router-dom only handles the internal navigation. It means that it can only navigate or redirect to the URLs within the same react application i.e. http://localhost:3000. And that's why the subdomain is interpreted as an internal path and is appended to the current path.
If you need to navigate to an external URL you can use window.location object. You can either create a separate component for navigation or just directly use it as shown below :
import React, { useEffect } from 'react';
import { getSubdomainHref } from "./../utils";
useEffect(() => {
if (user.user_type !== 'anonymous') {
let newHref = getSubdomainHref()
window.location.href = newHref;
}
}, [user]);
Prince Mittal is 100% correct. This is what I have chosen to do to solve the problem:
on the login page, if you are not already logging in from the correct subdomain what will happen is you will get in the response a 1-time use token which can be used for a short period of time to log in.
once the token is received, I will use the window.location.href method to redirect my site to a special page that I will make specifically for this purpose which will take in the token and then immediately pass it to the backend so the user can be re-authenticated. the url will look something like this: http://subdomain.localhost:3000/redirect/CODE
once the user is logged in they will be redirected to the home page using the normal react navigation method.