Personalizing MUI Stepper

Vincent Dizon — Thu, 27 Jul 2023 15:42:30 +0000

Interested on how to customize your MUI Stepper?

<Stepper activeStep={activeStep}>
  <Step
    sx={{
      '& .MuiStepLabel-root .Mui-completed': {
        color: 'green', // circle color (COMPLETED)
      },
      '& .MuiStepLabel-label.Mui-completed': {
        color: 'black !important', // label color (COMPLETED)
      },
    }}
  >
    <StepLabel>Personal Details</StepLabel>
  </Step>
  <Step
    sx={{
      '& .MuiStepLabel-root .Mui-completed': {
        color: 'green', // circle color (COMPLETED)
      },
      '& .MuiStepLabel-label.Mui-completed': {
        color: 'black !important', // label color (COMPLETED)
      },
    }}
  >
    <StepLabel>Personal Details</StepLabel>
  </Step>
</Stepper>

from this default view

to this

Mastering Authentication in Next.js 13: A Comprehensive Guide to Secure User Authentication

Vincent Dizon — Thu, 01 Jun 2023 14:08:05 +0000

How to use NextAuth in NextJS 13?

Hey folks,

On this tutorial, I will teach you how to implement NextAuth in NextJS13.

Here are the steps we need to do:

- Install NextAuth
- Create env file
- Create a google api key clientId and clientSecret

Install NextAuth

npm i next-auth or yarn add next-auth

Create a google api keys

Create a google keys by going to google developers

or by following this official tutorial

Create env file

Create env file in the same level as your app directory and add the keys to it.

Code Implementation

Once done, we can start the fun part!
Create api\auth[...nextauth] folder inside the app directory. After that create a file called route.ts. Your folder should look like this

and paste this code

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
/*
    Note: No secret provided since it's provided in .env.local
    read more: https://next-auth.js.org/configuration/options#secret

*/
const handler = NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!,
      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET!,
    }),
  ],
  session: {
    maxAge: 60 * 60, // 1 hour
  },
});
export { handler as GET, handler as POST };

Now we're done implementing our next auth route. The next step will be implementing our SessionProvider.

SessionProvider

Now go to your layout.tsx file and add SessionProvider from NextAuth.

Your code should look like this

'use client'
import { SessionProvider } from "next-auth/react";
import { Poppins } from "next/font/google";
import "normalize.css";
const inter = Poppins({
  weight: ["300", "500", "600", "700"],
  subsets: ["latin"],
});

export const metadata = {
  title: "Sneak",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider>
          <main>{children}</main>
        </SessionProvider>
      </body>
    </html>
  );
}

Page

Now we will implement the signIn and signOut functions. Go to your page.tsx and copy this code. We will also check if the user is authenticated or not

"use client";

import { signIn, signOut, useSession } from "next-auth/react";

const Home = () => {
  const { data: session, status } = useSession();

  const handleSignin = () => {
    signIn("google");
  };

  const handleSignout = () => {
    signOut();
  };
  // this if condition will check if the user is authenticated or not
  if (status === "authenticated") {
    return (
      <div>
        <h1>{session.user?.email}</h1>
        <button onClick={handleSignout}>Logout</button>
      </div>
    );
  }
  return (
    <div>
      <button onClick={handleSignin}>Login Button</button>
    </div>
  );
};

export default Home;

Aaaaaaaand we're done!

Bonus! NextAuth with Middleware

What is middleware? Middleware will run before any page is rendered on the browser. It means, we can protect our pages from unauthorize users.

Create a middleware.ts file with the same level as your app.

It should look like this

Now, inside the middleware file, paste this code

export { default } from "next-auth/middleware";

// this code will protect any attempts from unauthorize users that will try to access protected route.
export const config = { matcher: ["/protected/:path*"] };

Any unauthorize users will be force to signIn using their Google Accounts.

Thanks for reading!

DEV Community: Vincent Dizon