Using SSR with Firebase and Next.js authentication

MakerKit uses SSR throughout the website. If you choose to use SSR, you can persist the user's authentication on every page.

Whether SSR on every page is something your website may need or not is up to your needs, but MakerKit makes this process very easy.

Let's assume the following is your Next.js Index page, and we want to show the user's Profile avatar if they signed in. Therefore, you will need to fetch the user's data from the getServerSideProps function and return it as props to the current page.

The MakerKit default template does it for you, but you need to remember to add the following snippet to every page you want the authentication persisted.

import { withUserProps } from '~/app/props/with-user-props';
function Index({ user }) {
    // display user in your components
}
export function getServerSideProps(ctx: GetServerSidePropsContext) {
  return withUserProps(ctx);
}

MakerKit also provides a UserSessionContext context, which you can inject with useContext in any of your components. Assuming you have a component AvatarComponent in which you want to display your user's avatar:

function ProfileAvatar() {
    const { user } = useContext(UserSessionContext);
    return (
        <img src={user.profileURL} alt='Profile Photo' />
    )
}

Alternatively, you can use the hook useUserSession:

function ProfileAvatar() {
    const {auth} = useUserSession();
    return (
        <img src={auth.profileURL} alt='Profile Photo' />
    )
}