I am trying to pass the user object to all pages in my next.js app and encountering an issue. Despite having working amplify code, I am unable to see anything in the console or passed as a prop with the current implementation.
// _app.tsx
import type { AppProps } from "next/app"
import type { GetServerSideProps, GetServerSidePropsContext } from "next"
import Amplify, { Auth, withSSRContext } from "aws-amplify"
import { AmplifyAuthenticator, AmplifySignIn } from "@aws-amplify/ui-react"
import { config } from "../amplify.config"
Amplify.configure({ ...config, ssr: true })
MyApp.getServerSideProps = async (context: GetServerSidePropsContext) => {
const appProps = await getServerSideProps(context)
return { ...appProps }
}
export const getServerSideProps: GetServerSideProps = async (ctx) => {
const auth = withSSRContext(ctx).Auth as typeof Auth
let user: any
try {
user = await auth.currentAuthenticatedUser()
console.log("user is authenticated:", user)
return { props: { user: user } }
} catch (err) {
console.log("error: no authenticated user")
}
}
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<AmplifyAuthenticator>
<AmplifySignIn hideSignUp usernameAlias="email" slot="sign-in" />
<Component {...pageProps} />
</AmplifyAuthenticator>
)
}