Update _app with next-auth Provider

pages/_app.js

@@ -1,7 +1,9 @@
-import React from 'react'
+import React, {useEffect} from 'react'
+import {useRouter} from 'next/router'
 import PropTypes from 'prop-types'
 import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
 import CssBaseline from '@material-ui/core/CssBaseline'
+import {Provider, useSession} from 'next-auth/client'
 
 const darkTheme = createMuiTheme({
   palette: {
@@ -18,7 +20,7 @@ const darkTheme = createMuiTheme({
 export default function MyApp(props) {
   const {Component, pageProps} = props
 
-  React.useEffect(() => {
+  useEffect(() => {
     const jssStyles = document.querySelector('#jss-server-side')
     if (jssStyles) {
       jssStyles.remove()
@@ -28,12 +30,45 @@ export default function MyApp(props) {
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
-      <Component {...pageProps} />
+      <Provider session={pageProps.session}>
+        {Component.auth ? (
+          <Auth><Component {...pageProps} /></Auth>
+        ) : (
+          <Component {...pageProps} />
+        )}
+      </Provider>
     </ThemeProvider>
   )
 }
 
+function Auth({children}) {
+  const [session, loading] = useSession()
+  const isUser = Boolean(session?.user)
+  const router = useRouter()
+  useEffect(() => {
+    if (loading) {
+      return
+    }
+
+    if (!isUser) {
+      router.push('/kont')
+    }
+  }, [isUser, loading, router])
+
+  if (isUser) {
+    return children
+  }
+
+  return (
+    <div>Loading...</div>
+  )
+}
+
 MyApp.propTypes = {
   Component: PropTypes.elementType.isRequired,
   pageProps: PropTypes.object.isRequired
 }
+
+Auth.propTypes = {
+  children: PropTypes.node.isRequired
+}