req.headers.referrer not working (always / or current page)
Unanswered
Northeast Congo Lion posted this in #help-forum
Northeast Congo LionOP
Hey everyone
I've been trying to implement a return to previous page system on my login page. Unfortunately, everytime I try to get the referrer (in my exemple the profile page) it does'nt work:
login.tsx:
loginForm.tsx:
when redirected from /profile, console.log(referrer) = "/"
I've been trying to implement a return to previous page system on my login page. Unfortunately, everytime I try to get the referrer (in my exemple the profile page) it does'nt work:
login.tsx:
import styled from "styled-components";
import LoginForm from "../components/organisms/loginForm";
import FullScreenSection from "../components/atoms/fullScreenSection";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "../lib/session";
import { User } from "../pages/api/userStatus";
///// STYLING REMOVED
const LoginPage = ({ user, referrer } ) => {
return (
<FullScreenSection
direction="column"
align="flex-start"
justify="space-between"
bgcolor="var(--primary)"
image={""}
topOfPage
>
<LoginWrapper>
<span>
{user.username ? `Logged in as ${user.username}` : "Not logged in"}
</span>
<LoginForm referrer={referrer} />
</LoginWrapper>
</FullScreenSection>
);
};
export default LoginPage;
export const getServerSideProps = withIronSessionSsr(async function ({
req,
res,
}) {
const user = req.session.user;
const referrer = req.headers.referrer || "/";
console.log("referrer = ", referrer)
if (user === undefined) {
return {
props: {
user: { isLoggedIn: false, login: "", avatarUrl: "" } as User,
referrer,
},
};
}
return {
props: { user: req.session.user , referrer},
};
},
sessionOptions);loginForm.tsx:
import LoginButton from "../atoms/login.button";
import LoginField from "../atoms/login.field";
import styled from "styled-components";
import { useRouter } from "next/router";
import { useState } from "react";
///STYLING REMOVED
const ErrorMsg = styled.p`
color: red;
`;
export default function LoginPage({referrer}) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [errorMsg, setErrorMsg] = useState(null);
const router = useRouter();
async function handleSubmit(e) {
e.preventDefault();
const response = await fetch("/api/auth/auth", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username, password}),
});
if (response.ok) {
alert("GG");
router.push(referrer);
} else {
setErrorMsg("Invalid username or password");
}
}
return (
<LoginFormContainer>
<h2>Bienvenue sur Ajensy!</h2>
<p></p>
{errorMsg && <ErrorMsg>{errorMsg}</ErrorMsg>}
<LoginForm onSubmit={handleSubmit}>
<LoginField
type="text"
placeholder="Nom d'utilisateur"
required
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<LoginField
type="password"
placeholder="Mot De Passe"
required
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<LoginButton type="submit">Log In</LoginButton>
</LoginForm>
</LoginFormContainer>
);
}when redirected from /profile, console.log(referrer) = "/"
2 Replies
Northeast Congo LionOP
when trying to use the same method as the documentation, I get this error:
Northeast Congo LionOP
I ended up using a query parameter, but i'd like a more elegant approach