CODEWITHSUNDEEP
javascriptreactjssubdomainmulti-tenant
Dallas Caley
Dallas Caley

Reputation: 5888

React route to subdomain from 2nd level domain

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:

  1. This file is a global utility file which I will import into the login page:
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 };
  1. And this is part of my login page (the important part)
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.

Upvotes: 1

Views: 4022

Answers (2)

Dallas Caley
Dallas Caley

Reputation: 5888

Prince Mittal is 100% correct. This is what I have chosen to do to solve the problem:

  1. 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.

  2. 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

  3. once the user is logged in they will be redirected to the home page using the normal react navigation method.

Upvotes: 1

Prince Mittal
Prince Mittal

Reputation: 326

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]);

Upvotes: 2

Related Questions