Next.js Discord

Discord Forum

req.headers.referrer not working (always / or current page)

Unanswered
Northeast Congo Lion posted this in #help-forum
Open in Discord
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:
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