How to make simple protected route using nextAuth?

Question

I wanna make simple protected route.

I have credentials provider and nextAuth middleware. I just wanna make simple logic:

if user is logged in he can visit /profile, and if he visits /signup or /signin redirect him to /profile, and if he isnt logged he cant visit /profile and redirect him to /signin
some routes are neutral - for example he can visit /shop while being logged in or not.

there is my [...nextauth].ts

export default NextAuth({
    session: {
        strategy: 'jwt',
    },
    providers: [
        CredentialsProvider({
            type: 'credentials',
            async authorize(credentails) {
                const { password, email } = credentails as Signin

                try {
                    const client = await connectToDatabase()
                    if (!client) return

                    const db = client.db()

                    const user = await existingUser(email, db)

                    if (!user) throw new Error('Invalid credentails!')

                    const isPasswordCorrect = await verifyPassword(password, user.password)

                    if (!isPasswordCorrect) throw new Error('Invalid credentails!')

                    return { email: user.email, name: user.name, id: user._id.toString() }
                } catch (e: unknown) {
                    if (e instanceof Error) {
                        throw new Error(e.message)
                    }
                }
            },
        }),
    ],
})

Yilmaz · Answer 1 · 2022-10-01T04:57:41.477

write a middleware

const authorizedRoles = (...roles) => {
  return (req, res, next) => {
    if (!roles.includes(req.user.role)) {
      return next(
        // write logic to handle errors
        new ErrorHandler(
          `Role (${req.user.role}) is not allowed`,
          403
        )
      );
    }

    next();
  };
};

then whichever routes you want to protect, use this middleware. Then on protected pages' getServerSideProps

export async function getServerSideProps(context) {
  const session = await getSession({ req: context.req });

  if (!session || session.user.role !== "admin") {
    return {
      redirect: {
        destination: "/home",
        // permanent - if `true` will use the 308 status code which instructs clients/search engines to cache the redirect forever.

        permanent: false,
      },
    };
  }

  return {
    props: {},
  };
}

I was looking for this approach – Ranu Vijay Oct 01 '22 at 04:54 — Ranu Vijay, Oct 01 '22 at 04:54

score 0 · Answer 2 · answered Oct 01 '22 at 04:52

Apart from other answers what you can do is-

At component mount at signin and sign up check user is authenticated or not. If authenticated. use router.push to profile else be at signin/signup.
At profile again check for authentiction at component mount, if not auth push to signin else be at profile. Important thing here is don't show the layout, content of profile page before checking user is authenticated or not. Use a spiner or loader till auth check is going on.

How to make simple protected route using nextAuth?

2 Answers2