nextjs

Author

yogain123 commented Oct 23, 2022

redirect

maybe that page is under maintainenece or maybe it is permanent shifted to other page (but user might have bookmarked old page)

Author

yogain123 commented Oct 23, 2022 •

edited

AUTHENTICATION IN NEXTJS

Author

yogain123 commented Oct 23, 2022 •

edited

Setup

setup SSO for github

https://www.youtube.com/watch?v=Aiqzfmy9A_4&list=PLC3y8-rFHvwgC9mj0qv972IO5DmD-H0ZH&index=68

Author

yogain123 commented Oct 23, 2022 •

edited

signin and signout from client

actually <Link href="" /> is not needed, you can use either Link or signIn function, or both
you can check cookie, you will see next auth session token
if you pass signIn("github") , github string inside then if you are already loggedin in github then it will auto login you on click of signin

Author

yogain123 commented Oct 25, 2022 •

edited

Client side authentication

above code is deplricated, new one is

in header.jsx

import classes from "../../../styles/Header.module.css";
import { signIn, signOut, useSession } from "next-auth/react";

function Header() {
  const sessionDetails = useSession();
  const { data, status } = sessionDetails;
  console.log({ data });
  return (
    <div className={classes.header}>
      This is header
      <hr />
      {status === "authenticated" && status !== "loading" && (
        <button
          onClick={() => {
            signIn("github");
          }}
          type="button"
        >
          SIGN OUT
        </button>
      )}
      {status === "unauthenticated" && status !== "loading" && (
        <button
          onClick={() => {
            signOut();
          }}
          type="button"
        >
          SIGN IN
        </button>
      )}
      {status === "loading" && <div>Loading...</div>}
    </div>
  );
}

export default Header;

in _app.js

import { SessionProvider } from "next-auth/react";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

in [...nextauth].js

import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
});