I am trying to follow the next-auth documentation using TypeScript. Using the following code and some code in _app.tsx
from the docs I can protect a page:
AdminDashboard.auth = {
role: "admin",
loading: <AdminLoadingSkeleton />,
unauthorized: "/login-with-different-user", // redirect to this url
}
What is the right way to implement this using TypeScript?
I found a solution which works, but I am not sure if this is the right way:
export type NextPageWithAuth = NextPage & {
auth: boolean,
role: string
}
type NextPageAuthProps = {
Component: NextPageWithAuth,
pageProps: any
}
The AppProps
type is quite more sophisticated than my own NextPageAuthProps
.