Next.js Handling User Logged In Status

Viewed 1333

I'm using next-iron-session in my next.js project with discord oauth2.

My Session Code:

import {
    GetServerSidePropsContext,
    NextApiRequest,
    NextApiResponse,
} from "next";
import { withIronSession, Session } from "next-iron-session";



export type NextIronRequest = NextApiRequest & { session: Session };
export type NextIronHandler = (
    req: NextIronRequest,
    res: NextApiResponse
) => void | Promise<void>;

export type NextRoute = (
    ctx: GetServerSidePropsContext & { req: { session: Session } },
    redirect: string
) => any;

export function withSession(handler: NextIronHandler | NextRoute) {
    return withIronSession(handler, {
        password: process.env.COOKIE_SECRET as string,
        cookieName: "session",
        ttl: 15 * 24 * 3600,
        cookieOptions: {
            secure: process.env.NODE_ENV === "production",
            sameSite: "strict",
            httpOnly: true,
        },
    });
}

Auth Handler Code:

import next, { GetServerSidePropsContext } from 'next'
import { withSession } from './session'

export const withAuth = (gssp: any) => {
    return async (context: GetServerSidePropsContext) => {
        const { req } = context
        const user = req.session.user

        if (!user) {
            return {
                redirect: {
                    destination: '/api/auth/login',
                    statusCode: 302,
                },
            }
        } 

        return await gssp(context)
    }
}

export const withAuthSsr = (handler: any) => withSession(withAuth(handler))

Dashboard Code:

import { GetServerSideProps, NextApiRequest } from "next";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { NextIronRequest } from "../util/session";
import { User, UserData } from "src/types";
import { developerRoute } from "src/util/redirects";
import { withSession } from "src/util/session";
import Router from "next/router";
import { redirect } from "next/dist/server/api-utils";
import { withAuthSsr } from '../util/AuthHandler'

interface Props {
  user?: User;
}


export default function Dashboard(req: NextIronRequest) {
  function Icon(icon: string) {
    console.log(icon)
  }
  return (
    <>
      <Head>
        <title>{req.user.user.username} | Dashboard</title>
        <link rel="shortcut icon" href={req.user.avatar} />
      </Head>
      <body>
        {
          req.user.guilds.map((guild: any) => {
            return (
              <>
                <div className="p-10 items-center justify-center flex flex-center grid grid-cols-2 grid-flow-row sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5">
                  <div className="rounded overflow-hidden shadow-lg">
                    <img className="w-full" src={Icon(guild.icon)} alt="Guild Icon" />
                    <div className="px-6 py-4">
                      <div className="font-bold text-center text-xl mb-2">{guild.name}</div>
                    </div>
                    <div className="px-6 pt-4 pb-2 items-center content-center justify-center">
                      <a href="#_" className="relative inline-flex items-center justify-center p-4 px-6 py-3 overflow-hidden font-medium text-indigo-600 transition duration-300 ease-out border-2 border-purple-500 rounded-full shadow-md group">
                        <span className="absolute inset-0 flex items-center justify-center w-full h-full text-white duration-300 -translate-x-full bg-purple-500 group-hover:translate-x-0 ease">
                          <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                        </span>
                        <span className="absolute flex items-center justify-center w-full h-full text-purple-500 transition-all duration-300 transform group-hover:translate-x-full ease">Manage Settings</span>
                        <span className="relative invisible">Manage Settings</span>
                      </a>
                    </div>
                  </div>
                </div>
              </>
            )
          })
        }
      </body>
    </>
  )
}

export const getServerSideProps: GetServerSideProps = withSession(withAuthSsr(developerRoute))

What's happening now is, if the user is even loggedIn it will redirect for login again, How do i fix that?

What did i do wrong? If the user isn't logged he/she gets redirected.

Next.js Version: 12.0.7 Next-Iron-Session Version: 4.2.0

0 Answers
Related