• Blog
  • Documentation
  • Courses
  • Changelog
  • AI Starters
  • UI Kit
  • FAQ
  • Supamode
    New
  • Pricing

Launch your next SaaS in record time with Makerkit, a React SaaS Boilerplate for Next.js and Supabase.

Makerkit is a product of Makerkit Pte Ltd (registered in the Republic of Singapore)Company Registration No: 202407149CFor support or inquiries, please contact us

About
  • FAQ
  • Contact
  • Verify your Discord
  • Consultation
  • Open Source
  • Become an Affiliate
Product
  • Documentation
  • Blog
  • Changelog
  • UI Blocks
  • Figma UI Kit
  • AI SaaS Starters
License
  • Activate License
  • Upgrade License
  • Invite Member
Legal
  • Terms of License
    • Auth Overview
    • Setting up Firebase Auth
    • Auth Flow
    • Third-Party Providers
    • Email Link Authentication
    • Multi-Factor Authentication
    • Requiring Email verification
    • Auth SSR
    • Page Guards
    • API Guards
    • Prevent abuse with AppCheck
    • Custom React Hooks
    • Troubleshooting

Using SSR with Firebase and Next.js authentication

Learn how to use SSR with Firebase Authentication and Next.js

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.

tsx
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:

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

Alternatively, you can use the hook useUserSession:

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