DEV Community: Sabbir Sobhani

Quickly Set Up Kinde Authentication in Next.js: A Step-by-Step Tutorial Series🔐

Sabbir Sobhani — Thu, 29 Aug 2024 13:32:29 +0000

Welcome to my Kinde Authentication Tutorial Series! In this 3-part series, I’ll guide you through the entire process of integrating Kinde’s powerful authentication system with your Next.js application. Whether you’re building a secure web app or looking to enhance your skills, this series covers everything you need to know—from setting up Kinde in your Next.js project to implementing route protection with both in-component logic and middleware.

What You'll Learn:

How to Add Kinde Authentication to a Next.js Application (Part 1)

Set up Kinde, configure your Next.js app, and add user authentication with ease.

Implement In-Component Route Protection in Next.js (Part 2)

Learn how to protect specific components in your app, ensuring that only authenticated users can access them.

Secure Next.js Routes with Kinde Middleware (Part 3)

Dive deeper into route protection by setting up middleware in Next.js to guard entire routes from unauthorized access.

Buy Me a Coffee 🙏:
If this video/article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Thank you! If my video tutorial helps you authenticate your Next.js app with minimal steps, I'll be happy. Please share your thoughts in the comments. Also, don't forget to subscribe to my YouTube channel for more updates.

X@sabbirsobhani
GitHub@iamsabbirsobhani
StackOverflow

Next.js Server-Side vs. Client-Side Components

Sabbir Sobhani — Sat, 17 Feb 2024 13:02:41 +0000

In Next.js it is very confusing topic for the beginner or intermediate level coders to understand the difference between server and client components. While it is true that official docs provide a clear distinction between them but it is not enough to grasp the topic efficiently. So, this article is for every coders who have been through this concept.

At first, we have to understand that what is Nextjs? Next.js is a web framework built on top of React.js library. And, React.js library is a library built on top of the JavaScript scripting language. While the core React.js library is primarily intended to create Single Page Application (SPA); means the whole codebase will be rendered to your browser or client side and then React DOM will take control of the entire application, and as a result you can’t find any page loading and it will be feeling like a native application. But, it has a small but effective problem which is hydration! Oops! What is hydration? Al right in web framework term hydration is referred to the process of mixing JavaScript with the actual website code while rendering to the browser.

Scrawlers only can read web pages which are Server Side, means while the page will load it will have all the necessary MetaData as well as JavaScript without AJAX behavior. In other word only Hydrated/SSR web pages can read Scrawlers.

In Single Page Application (SPA) hydration takes a bit time to process, so SEO scrawlers while try to access the SPA site for the better indexing it doesn’t find any metadata for the app so it never get indexed by scrawlers. So, coders around the world demand for a framework that will be a React.js app but as well as can be SSR or crawlers readable at the same time. For removing this problem Next.js emerged and evolving!

FontAwesome Alternatives: Explore These 4 Free Icon Libraries

Sabbir Sobhani — Thu, 09 Nov 2023 04:56:43 +0000

Icons are among the most important navigational elements of a web application or any kinds of applications. Often, we rely on FontAwesome an often-overrated icons provider. And, unfortunately, many essential icons are only available for a fee.

So, here are 4 alternatives of FontAwesome icon libraries we can use, and these are completely free. You can use these libraries on daily basis with any kinds of frameworks(React, Vue, Angular, Svelte etc.), or static HTML, CSS, JS projects.

Google Fonts Icons AkA Material Symbols

According to the official docs, Material Symbols are the newest icons consolidating over 3,169 glyphs in a single font file with a wide range of design variants. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).

Link: Google Material Symbols

Heroicons

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

According to the Heroicons it has motto, Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Available as basic SVG icons and via first-party React and Vue libraries. Heroicons can be used by any kinds of web apps with or without any framework.

It has supported mainly three different types of Icon sets:

Outline

For primary navigation and marketing sections, with an outlined appearance.

Solid

For primary navigation and marketing sections, with a filled appearance.

Mini

For smaller elements like buttons, form elements, and to support text.

Link: Heroicons

Boxicons

Boxicons provides High Quality Web Icons. It is simple open source icons carefully crafted for designers & developers. Switching to Boxicons is easy and can be done in few steps. There are more features than just the icons set. Moreover, Boxicons also follows the official Google Material Design guidelines.

Link: Boxicons

Ionicons

According to the official site it is Open sourced icons. Lovingly hand-crafted. Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG. Completely open source, MIT licensed and built by Ionic.

Ionicons is a completely open-source icon set with 1,300+ icons crafted for web, iOS, Android, and desktop apps. Ionicons was made for Ionic Framework, a cross-platform hybrid and Progressive Web App framework.

The Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.

Link: ionicons

For more updates,
Follow me on dev.to@sabbirsobhani
Follow me on X@sabbirsobhani
Follow me on GitHub@iamsabbirsobhani

Efficient Route Protection in Next.js with Auth0 Middleware: Excluding Specific Routes

Sabbir Sobhani — Tue, 07 Nov 2023 17:20:22 +0000

When using Auth0 with Next.js, securing all routes except for specific ones, such as the homepage or login page, can be achieved without the need to add extra logic for each route in the middleware. This can be accomplished by using a simple yet powerful regular expression (regex).

From Next.js official docs

It suggests in matcher we can write a regex /((?!api|_next/static|_next/image|favicon.ico).*). This matcher will match all request paths except for the ones starting with

api (API routes)
_next/static (static files)
_next/image (image optimization files)
favicon.ico (favicon file)

When we add this matcher with Auth0 middleware, the homepage(/) has been also included automatically by the Auth0 guard. It means we have to sign in to visit the root path (/) or homepage! And, this is not desired.

So, we can modify the given regex to achieve our goal.

Case 0: We want to exclude homepage(`/`) under the guard of `Auth0`

src/middleware.ts



import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     */                                           👇🏻
    '/((?!api|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage can be visited without sign in/up, but every other routes in the app are secured by Auth0.

Case 1: We want to exclude about(`/about`) page under the guard of `Auth0`

src/middleware.ts



import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     * - about (about page)
     */        👇🏻
    '/((?!api|about|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage, about page can be visited without sign in/up, but every other routes in the app are secured by Auth0.

Case 2: We want to exclude any(`/any`) page under the guard of `Auth0`

src/middleware.ts



import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - about (about page)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico (favicon file)
     * - $ (homepage)
     * - about (about page)
     * - any (anypage)
     */           👇🏻
  '/((?!api|about|any|_next/static|_next/image|favicon.ico|$).*)',
  ],
};
export default withMiddlewareAuthRequired();

Outcome: Now homepage, about page as well as any page can be visited without sign in/up, but every other routes in the app are secured by Auth0.

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

So, this is very useful if your app is required a tight security on every routes but a very few routes need to public then this method will be very helpful as well as time-saving. Otherwise, you have to implement middleware logic or in component logic for every routes you want to be secured!

Follow me on X@sabbirsobhani
Follow me on GitHub@iamsabbirsobhani

Google Icons from Google Fonts with Nextjs

Sabbir Sobhani — Tue, 07 Nov 2023 11:58:19 +0000

Google has just launched it's material icons out of the box for all platforms. Previously the specification of Google Material Icons were developed by MUI/Vuetify and some other Google Material Based UI libraries for different frameworks. But, now Google itself developed its icon and make it open to all platforms to adopt. So, will it replace fontawesome?🤨 who knows! but it's a great time to get rid of premium/pro icons based businesses.

So, as of now there is no direct documentation how to use the Google Icons using frameworks like Nextjs. So, to use it using Next.js 14 and app/ directory we can create a global css file and can give it a relevant name, let's say globalicons.css(path is app/globalicons.css) and import it from global app/layout.tsx or app/layout.jsx

app/layout.tsx



import type { Metadata } from 'next';
import { Lexend } from 'next/font/google';
import './globals.css';
import './globalicon.css'; // 👈🏻

export const metadata: Metadata = {
  title: 'Website title',
  description: 'Website description',
};

const lexend = Lexend({ subsets: ['latin'] });

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

At first copy the icons url from the Google Fonts website.

And, paste the copied url to @import url(paste url)

app/globalicons.css



@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

Now, copy the style part of the icon, you can modify if you want like color, weight. Paste it to globalicons.css

app/globalicons.css



@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

Now, from any component we can use <span className="material-symbols-outlined">arrow_back</span> for arrow_back icon, and for different icons we would just need to change the name of the icon from Google Fonts Icons. Moreover, we can use any Google Fonts Icons to any of our components without extra setup.

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

So, this can be a minimal setup. Though it is not an ideal or official solution but a viable one. For more further and advance use case of Google Fonts Icons follow the recommended official docs for Material Symbols guide

Follow me on X@sabbirsobhani
Follow me on GitHub@iamsabbirsobhani

How to Dynamically Change Favicon Icon in Next.js 14

Sabbir Sobhani — Sat, 04 Nov 2023 06:08:43 +0000

If you want to change favicon based on color modes(dark or light mode) in Next.js 14. And, automatically switch between the black and white favicon versions according to the user's color scheme preference. This article is for you!

Though there were no direct solution in the docs about icons but got a hint so this is how we can achieve it:

I have made a video tutorial if you want to see how it works and how to implement practically! or if you want to stick on the article just read on instead.



// app/layout.tsx
export const metadata: Metadata = {
  title: 'Website Title',
  description: 'Website description',
  icons: {
    icon: [
      {
        media: '(prefers-color-scheme: light)',
        url: '/images/icon-light.png',
        href: '/images/icon-light.png',
      },
      {
        media: '(prefers-color-scheme: dark)',
        url: '/images/icon.png',
        href: '/images/icon-dark.png',
      },
    ],
  },
};

Need to delete app/icon.png or any files that by default map the favicon in order to active the Metadata interface's icon. And, my favicon or icon images stored in public/images/icon-light.png and public/images/icon-dark.png. And, now its working dynamically based on color modes.

Buy Me a Coffee 🙏:
If this video/article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Quick Procedure:

Delete any favicon or icon images from app/ directory.
Store favicon or icon images to public/images/ directory.
In app/Layout.tsx metadata.icons.icon add url and href path to the stored images relative path. ✅

Follow me on X@sabbirsobhani

CSS child behind parent with z-index

Sabbir Sobhani — Tue, 15 Nov 2022 08:36:23 +0000

z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements). w3school

Child behind Parent

parent: Not set any z-index (it's important), set position relative (by default though it's relative).

child: Give any positional value (absolute, sticky or fixed), and z-index any negative integer value.

Now, the child is behind the parent element. ✅

➕

Scenario

If you have a situation so to make the parent element fixed, sticky or absolute then what?

Simple, since child element will not work with z-index: -1; or behind parent, if parent is other than relative. Just wrap the parent element with any tag and make it fixed, sticky or absolute.

<div class="wrapper fixed-or-sticky-or-absolute"> 👈wrapper tag
    <div class="parent relative">
        <div class="child any-position-will-work z-index(-1)"></div>
    </div>
</div>

Moreover, you can now give any z-index value to the wrapper element tag and it will not affect the child and parent.

Done.

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Follow me on Twitter sabbirsobhani

Node.js v19.0.0 --watch option

Sabbir Sobhani — Fri, 21 Oct 2022 13:30:12 +0000

short

Node has released their 19th version. Many important new additions have been made in this version. One addition I find very interesting.

We have been using nodemon to watch script changes for a long time. Now, we don't have to rely on this third party library. Because, Node.js has just added --watch option in their new version, which will work exactly like nodemon. CMD node --watch [your-file-name]. Example: node --watch app.mjs

Follow me on Twitter

AOS scrolling animation with VueJS 3

Sabbir Sobhani — Fri, 03 Sep 2021 17:33:41 +0000

We can use any JavaScript library with Vuejs and its all versions. We can use AOS as well, Animate On Scroll Library with Vue.js 3, and it's super easy to implement. Let's start!

Install AOS

Using npm
```
  npm install aos --save
```

Vue CLI project src/main.js

import { createApp } from 'vue'
import App from './App.vue'

// importing AOS css style globally
import 'aos/dist/aos.css'

const app = createApp(App);

app.mount('#app')

Template part of a component, src/components/HelloWorld.vue

this is just for an example to implement, you can use anything supported by AOS.

<template>
  <div class="hello">

    <!-- card 1 -->
    <div
      data-aos="zoom-in"
      class="card"
      style="width: 18rem; margin: 100px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card 2 -->
    <div
      data-aos="new-animation"
      data-aos-offset="200"
      data-aos-easing="ease-in-out"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card  3-->
    <div
      data-aos="fade-right"
      class="card"
      style="max-width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>

    <!-- card 4 -->
    <div
      data-aos="fade-left"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 4</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    <!-- card 5 -->
    <div
      data-aos="flip-left"
      class="card"
      style="width: 18rem; margin: 200px auto;"
    >
      <img
        src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=889&q=80"
        class="card-img-top"
        alt="..."
      />
      <div class="card-body">
        <h5 class="card-title">Card 5</h5>
        <p class="card-text">
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import AOS from "aos";

onMounted(() => {
    AOS.init();
})

</script>

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Full project code:

AOS Scrolling GitHub

Reference

AOS Docs on GitHub
AOS Demo

Font Awesome with VueJS 3

Sabbir Sobhani — Sat, 22 May 2021 10:03:14 +0000

version 5

Font Awesome is a great tool for working with various of icons. It is the most popular and widely using icon toolkit. In a VueJS 3 CLI project you can easily add Font Awesome library by following these easy steps:

install `fontawesome` packeges from `npm`

install all of them one by one

npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-brands-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/vue-fontawesome
npm i --save @fortawesome/vue-fontawesome@prerelease

5 no is for Vue version 3 only
6 no is for Vue 3++ version, also work with Vite

install 5 or 6, not both

import in `main.js`

You can find main.js inside your vuejs 3 project, /src folder.

//vue-app/src/main.js
import { library } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas);
import { fab } from '@fortawesome/free-brands-svg-icons';
library.add(fab);
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(far);
import { dom } from "@fortawesome/fontawesome-svg-core";
dom.watch();

const app = createApp(App);

app.component("font-awesome-icon", FontAwesomeIcon);

// add necessary dependencies...

app.mount("#app");

Thats it! now you can use font awesome icon in your VueJS 3 project!

<i class="fad fa-laugh-wink"></i>

if there any problem popup, don't forget to ask me!

Follow me on Twitter sabbirsobhani

Buy Me a Coffee 🙏:
If this article helped you a bit and you'd like to support my work, feel free to buy me a coffee: https://buymeacoffee.com/sobhani ☕️ Thanks for keeping me motivated!

Note: This article was originally Posted on May 22, 2021. While the core concepts discussed here remain relevant, please be aware that the technology landscape is constantly evolving. Libraries, frameworks, and best practices may have changed since this article was written. For the most up-to-date information, consider checking the latest documentation or resources.

DEV Community: Sabbir Sobhani

Quickly Set Up Kinde Authentication in Next.js: A Step-by-Step Tutorial Series🔐

Next.js Server-Side vs. Client-Side Components

FontAwesome Alternatives: Explore These 4 Free Icon Libraries

Google Fonts Icons AkA Material Symbols

Heroicons

Outline

Solid

Mini

Boxicons

Ionicons

Efficient Route Protection in Next.js with Auth0 Middleware: Excluding Specific Routes

Case 0: We want to exclude homepage(/) under the guard of Auth0

Case 1: We want to exclude about(/about) page under the guard of Auth0

Case 2: We want to exclude any(/any) page under the guard of Auth0

Google Icons from Google Fonts with Nextjs

How to Dynamically Change Favicon Icon in Next.js 14

Quick Procedure:

CSS child behind parent with z-index

Child behind Parent

Scenario

Node.js v19.0.0 --watch option

AOS scrolling animation with VueJS 3

Install AOS

Vue CLI project src/main.js

Template part of a component, src/components/HelloWorld.vue

Full project code:

Reference

Font Awesome with VueJS 3

install fontawesome packeges from npm

import in main.js

Case 0: We want to exclude homepage(`/`) under the guard of `Auth0`

Case 1: We want to exclude about(`/about`) page under the guard of `Auth0`

Case 2: We want to exclude any(`/any`) page under the guard of `Auth0`

install `fontawesome` packeges from `npm`

import in `main.js`