ReactJS - NextJS - A HOC for wrapping NextJS pages in an authentication check. Checks for getInitialProps on the child component and runs it, so you still get SSR from the page. Also includes a user agent for Material UI.

nextjs-hoc-authorization.js

import React, {Component} from 'react'
import Router from 'next/router'
import AuthService from './AuthService'

export default function withAuth(AuthComponent) {
    const Auth = new AuthService('http://localhost')
    return class Authenticated extends Component {

      static async getInitialProps(ctx) {
        // Ensures material-ui renders the correct css prefixes server-side
        let userAgent
        if (process.browser) {
          userAgent = navigator.userAgent
        } else {
          userAgent = ctx.req.headers['user-agent']
        }

        // Check if Page has a `getInitialProps`; if so, call it.
        const pageProps = AuthComponent.getInitialProps && await AuthComponent.getInitialProps(ctx);
        // Return props.
        return { ...pageProps, userAgent }
      }

      constructor(props) {
        super(props)
        this.state = {
          isLoading: true
        };
      }

      componentDidMount () {
        if (!Auth.loggedIn()) {
          Router.push('/')
        }
        this.setState({ isLoading: false })
      }

      render() {
        return (
          <div>
          {this.state.isLoading ? (
              <div>LOADING....</div>
            ) : (
              <AuthComponent {...this.props}  auth={Auth} />
            )}
          </div>
        )
      }
    }
}

Thanks for the help @Sergioamjr

I've tried both, but making props optional was the only one that worked! I guess Partial would go 1 level up so that props become optional.

type EmptyProps = {
  props?: Record<string, unknown>
}

💪

anyone done this without getInialProps ? currently im using next 11 and i want to add auth to my app but so far i couldnt understand the logic around protected routes in next js

Thank a lot