I’m making a website with Express/React, and I’m not sure if I should use Express to use sendFile to send my website through there, or if I should not? I’m mostly asking about good practices.
Because I’m using Oauth that will log me in through Steam (video game launcher), and right now I’m not serving my page through Express, and since I’m new to Express and backend, and only like 3-5 months into learning React, backend is a lot to take in.
So my (probably not so great) solution is that I load my React page, click on login button, which redirects me to a page from express that is just empty and has no React or anything, which instantly redirects me to the Steam page where I can login. It then redirects me back to an express page. Which is where I’m stuck. I have my data, but I don’t know how I should be able to redirect the user to the React page again and keeping the data. And I imagine that would not be a problem if I just served my React page through express instead.
So this leads me to a few questions:
First, are both solutions (sending React page through Express, or just doint it “the normal” way) okay, just personal preference? If not, which way is the best when it comes to React?
Second, if I didn’t serve my React page through Express, how would I solve this? I’ve been trying for a while but I am really not able to figure it out. Because when I redirect them back to the React page, I need something to send with the user to verify it’s them when the client needs to fetch data from express.
This is my express file for login. All comments that don’t have code to the left of it are comments left by me to make the code more clear and explain what I tried.
const express = require("express");
const router = express.Router();
const SteamAuth = require("node-steam-openid");
const steam = new SteamAuth({
realm: "http://127.0.0.1:3001/auth/steam/", // Site name displayed to users
returnUrl: "http://127.0.0.1:3001/auth/steam/authenticate", // Your return route
apiKey: "I blurred out my key:)", // Steam API key
});
//When I press my login button on the page, I get sent here
//this redirects me to the login through Steam page.
router.get("/auth/steam", async (req, res) => {
const redirectUrl = await steam.getRedirectUrl();
return res.redirect(redirectUrl);
});
//This below is where the users gets redirected
//after I have logged in through Steam,
//as you can I'm trying to redirect the user back
//to the page with port 3000 which is my React page, the main page.
//And I have no clue how to send the data with the redirection.
router.get("/auth/steam/authenticate", async (req, res) => {
try {
const user = await steam.authenticate(req);
res.redirect("http://127.0.0.1:3000/");
//...do something with the data
} catch (error) {
console.error(error);
}
});
module.exports = router;
This is my react App.JS, the element is simply a button which sets my url so I get sent to the express URL that send me to Steam Oauth page.
window.location.href = "http://127.0.0.1:3001/auth/steam";
import "./App.css";
import "./styles.css";
import Login from "./modules/btn.js";
import { useEffect } from "react";
function App() {
//this useEffect is just me testing that it works
useEffect(() => {
fetch("http://127.0.0.1:3001/hej")
.then((res) => res.json())
.then((json) => {console.log(json)});
}, []);
return (
<div className="App">
<Login />
</div>
);
}
export default App;