Authentication between different applications through sessions (React + Express)?

Question

I'm developing a React + Express website and I'm in doubt on how to implement the login functionality since it depends on another application. Let me explain it:

• There is a system (app 1) in which the users create their accounts
• Once the user is logged into the system, they can click a button that redirects them to the website
• When the button is clicked inside the system (app 1), it makes a POST request to the backend of the website (app 2), sending the encrypted user credentials to the endpoint

I managed to get the posted data from the system in the website's backend, but now I'm not sure on how to pass/get this data into the frontend. I'm thinking on doing it like so:

• Once the backend (app 2) receives the user data from the system (app 1), it creates a session that witholds the user data (still encrypted)
• With the session created, the backend redirects to the frontend (app 3)
• The frontend (app 3) makes a request to the backend (app 2) to get the needed data that is stored in the session (basically the user name)

I'm new on the backend topic so, although I think this method will work, I'm not sure if it's a good way.

I appreciate whoever can contribute with feedback and ideas and I'm open to provide more information if necessary.

Answer 1

From trying to apply @Dylan suggestions, I kept searching and understood that I was looking at things from the wrong perspective. I was thinking about my frontend and backend as two separate things.

My backend was running on port 5000 and the frontend on port 3000, so wehenever I tried to pass some authorization header or cookies from my backend to my frontend, they were wiped since the domain was changing.

The socket.io approach also didn't work because I didn't have "app 1" and "app 3" opened at the same time in diferent places (I'm sure that probably there is a way to do it with socket.io, but I didn't menaged to).

So, once I wrapped my head aroud those basic concepts of HTTP requests, the first thing I did was to run the website's both front and backend at the same port (I'll share the tutorial here once I find it). With this I then could pass tokens and cookies from back to front and vice versa.

Ultimately I rebuild my website in Next.js and used cookies to persist the login!

Answer 2

When creating your user backend you can create an auth router that is responsible for signing users in and creating users.

authRouter.post('/signup', async (req, res, next) => {
  const { username, email, password: plainTextPassword } = req.body;

Then when creating the login/signup you would create a token that stores all of the user information inside a combination of letters and numbers. This is created by a package called jsonwebtoken. An example would be the following:

const newUser = await User.create(user)

token = jwt.sign(
  {
     _id: newUser._id,
     username: newUser.username,
     email: newUser.email,
     type: 'user',
  },
  process.env.SECRET,
  { expiresIn: '24h' }
);
return res.status(201).send({ token, newUser })

note I did not send their password.

then when you receive the response, i'm assuming you're using axios, you can set the token in localStorage.

const storeUser = ({ userObj: user, token }) => {
    localStorage.setItem('user', JSON.stringify(user));
    localStorage.setItem('token', token);
};

const login = (credentials) => {
   axios
      .post('/auth/login', credentials)
      .then((response) => {
        storeUser(response.data);
      }.catch (error) { console.error(error) }
}

Thats the basics of it. look into jsonwebtoken and if you're looking for something extra for security bcrypt for securing passwords.

From what you have described, you should be able to do all of the above with one extra step, look into socket.io that should get you started in implementing what I just described but with two applications, they just need to be able to communicate. Just create the token then send it to your second application. Socket.io is your solution.