I'm very confused about how to get the current user with SSR to get some user data.

I've been using the context API with react, and it's been working so far, until I need SSR to get data from an API. I want to get the current user id, so I can get a token that is stored in Firestore.

Auth.js

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
}

SSR

export async function getStaticProps() {
  const api = {
    auth: "token",
  };

  //fetch api

  return {
    props: {
      data,
    },
  };
}

I'm very confused about how to get the current user with SSR to get some user data.

I've been using the context API with react, and it's been working so far, until I need SSR to get data from an API. I want to get the current user id, so I can get a token that is stored in Firestore.

Auth.js

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
}

SSR

export async function getStaticProps() {
  const api = {
    auth: "token",
  };

  //fetch api

  return {
    props: {
      data,
    },
  };
}

• javascript
• firebase-authentication
• next.js
• server-side-rendering

Share Follow edited Sep 19, 2021 at 14:43 Frank van Puffelen 601k8585 gold badges890890 silver badges860860 bronze badges asked Sep 19, 2021 at 11:07 PollePolle 8122 silver badges55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Firebase SDKs are meant to be used on client side only so you won't be able to get current user on server side unless you set a cookie. Whenever a user logs in, you can call your API which will create a session cookie using Firebase Admin and set it.

app.post('/sessionLogin', (req, res) => {
  const idToken = req.body.idToken.toString();
  const expiresIn = 60 * 60 * 24 * 5 * 1000;

  return admin
    .auth()
    .createSessionCookie(idToken, { expiresIn })
    .then(
      (sessionCookie) => {
        const options = { maxAge: expiresIn, httpOnly: true, secure: true };
        res.cookie('session', sessionCookie, options);
        res.end(JSON.stringify({ status: 'success' }));
      },
      (error) => {
        res.status(401).send('UNAUTHORIZED REQUEST!');
      }
    );
});

You can read the session cookie in getServerSideProps and verify it to get user's UID:

const decoded = await admin.auth().verifySessionCookie(sessionCookie)