Proper, reusable way to ensure that user is authenticated on specific routes?

[simplenotezy]

What is a proper, secure way, to ensure that user is authenticated on specific routes?

Say I have /admin/ page, on which I require the user to be authenticated, before I execute the code in getServerSideProps, I want to ensure that the user is logged in. If the user is not logged in, I want to redirect to the login page, and after login, user will be redirected back.

I can't find much documentation on this. I can implement my own workaround, but I expect there to be some default way of doing this, in the library.

Any help is much appreciated

[balazsorban44]

https://next-auth.js.org/tutorials/securing-pages-and-api-routes

Personally I don't like to use getServerSideProps for only auth, so I came up with this:

https://next-auth.js.org/getting-started/client#custom-client-session-handling

(I think we should move the latter into the former page)

I hope it helps! 😊

[balazsorban44]

getServerSideProps is no magic, just a regular JS function. 😊

I would only fetch data on server side, if it is static/can be fetched through getStaticProps. It depends on the type of page you want to show though. If it's an admin dashboard, there is probably no static content, and I would do all the fetching clientside, like a regular SPA. At work, we use this approach for articles that need auth from our users, but we render SOME parts of the article (with a paywall on top) to give a sneak peek of our content. We render the public parts statically, and fetch the protected content client-side with fetch calls.

My view on getServerSideProps might be very opinionated, but I see almost no reason to use it.

[simplenotezy]

Hey @balazsorban44 I makes good sense. Yes, this is for an admin dashboard, so I guess theres no need to fetch anything on server. I like the idea of fetching one place only (client) as well. Thanks for your valuable input.

[simplenotezy]

@balazsorban44 Question regarding your "client-only" suggestion, which I really like. Where does pageProps.session come from?

export default function App({ Component, pageProps }) {
  return (
    <Provider session={pageProps.session}>

[simplenotezy]

Also, while playing around with your suggestion I experience a weird issue when switching pages. It keeps saying "Loading user...", without actually doing anything. If I refresh the page, it works fine. Not sure what's going wrong here 😊

[simplenotezy]

Update: If I console.log like so:

useEffect(() => {
    console.log('is user?', isUser, session, loading);
    if (loading) return; // Do nothing while loading
    if (!isUser) signIn(); // If not authenticated, force log in
  }, [isUser, loading]);

On page switch I get:
is user? false undefined true

On page refresh I get:
is user? true {user: {…}, expires: "2021-07-23T09:10:05.755Z", accessToken: "XXXXX"} false

So it seems like "loading" state never changes.