DEV Community: eugene musebe

Meet the Cloudinary Creators Community: A New Space for Developers Building with Media

eugene musebe — Mon, 23 Feb 2026 14:13:47 +0000

The wait is finally over! We’re honored and excited to pull back the curtain on a project that has been fueling our passion for months: the Cloudinary Creators Community (CCC).

At Cloudinary, we know that the leap from finishing a coding tutorial to landing your dream role can feel like a massive chasm. That’s why we created the CCC. We aren't just building a community; we’re building a bridge to help you cross that gap and step into your future as a leader in the tech industry.

The Vision: ‘From Cloud to Crowd’

Our mission is captured in four simple words: from Cloud to Crowd,a phrase coined by one of our community members, Jerome Hardaway.

This program is specifically designed for the dreamers and the doers, the early-career developers, the brave career-changers, and the media-savvy creators who are ready to shape the future of the visual web. Whether you're just starting to understand how images and videos power the internet or you're already building complex apps, we’re here to empower you with the tools, mentorship, and global network you need to grow from a learner into a recognized Cloudinary Creator.

At the heart of everything we do are our three core values:

Learn. Master the fundamentals of modern media management and high-performance web development through structured, accessible education.
Build. Turn that knowledge into action! We provide the platform for you to ship real-world projects that make your portfolio shine.
Connect. Join a vibrant, global ecosystem of peers and industry experts who are all rooting for your success.

We believe that when you combine the right tools with a supportive community, there’s no limit to what you can create. Ready to see how we’re making it happen?

Phase 1: Education

Joining the Community: Two Pathways

We want to make sure the CCC is accessible while maintaining the high-quality mentorship that makes this program special. There are two exciting ways to join us:

The Partner Pathway

We’re incredibly proud to launch in collaboration with global nonprofits that are changing the face of tech. If you’re a member of GirlScript, Developers in Vogue, Vets Who Code, Hack Your Future, or Tampa Devs, you have a direct seat at the table! We work closely with these organizations to provide dedicated spots for their communities.

The Individual Pathway

Are you an independent builder ready to level up? You can join, too! Simply dive into our "Cloud to Crowd" course at the Cloudinary Academy. Once you’ve mastered the material and passed the exam, you can submit an application to join our priority waitlist for the next available cohort.

Because we keep our cohorts selective to ensure everyone gets the support they need, these spots are highly coveted, so bring your A-game!

Phase 2: Activation

Discord: Our Digital Headquarters

Discord is where Phase 2 happens. Once inside, you get access to private channels, technical support, and our Developer Relations staff. To keep the community vibrant, we have a 30-day rule: New members must introduce themselves within their first month to keep their seat. You have 14 days to accept your invitation. We also monitor activity. After 60 days of silence, your status becomes inactive, and after 90 days, your spot is released to a new learner on the waitlist. This ensures our headquarters is full of creators ready to ship.

Selectivity and Waitlist Management

To guarantee quality mentorship, we limit active seats. This keeps our environment high-performing and focused. We operate on a bi-annual model with two intake cycles. If seats are full, you’ll join our priority waitlist. We monitor activity closely and invite waitlisted learners as spots open, ensuring every creator gets the support they deserve. Even if you’re not yet onboarded as an official Cloudinary Creator, however, please join us on Discord to engage with the community and participate in our fun activities such as hackathons and challenges.

Membership Benefits and Rewards

Your growth is rewarded at every stage. As a recognized creator, you gain access to a toolkit designed to power your professional portfolio.

The journey includes a one-year renewable Ambassador Plan to ensure your personal projects perform at their best. We also celebrate your milestones with exclusive digital badges via Holopin, giving you a way to showcase your education and project achievements to your network.

Beyond the tech, you’ll join an ecosystem built on mentorship. This includes dedicated office hours for technical Q&A, tailored career advice, and networking opportunities within the broader Cloudinary partner network. And to welcome you properly, once you’ve made your first meaningful engagement on Discord, we’ll ship the official CCC Swag Pack directly to your door.

The Engagement Path (12 Points/Year)

We value builders over observers. To keep your creator status active, we use a simple point system with a goal of 12 points per year.

You earn 5 points for shipping a project and 3 for joining a mini-community hackathon. Attending events earns you 2 points, while smaller acts like helping a peer solve a bug or joining a weekly standup earn 1 point. This path ensures our creators stay sharp, connected, and consistently moving forward.

Community Life and Activities

The activation phase is where the energy truly shifts. We keep the momentum high with hackathons and mini challenges designed to test your skills and reward your creativity with exciting prizes.

Our regular Demo Days give you a global stage to showcase your projects to the community and beyond. To track your progress, we use gamification through leaderboards and badges to celebrate our most active contributors. When you need help or career advice, our live office hours provide direct access to the experts who can help you solve technical challenges and plan your next big move.

Professionalism and Governance

A community this vibrant thrives on respect. Our Code of Conduct ensures that every member feels included and supported as they grow. We prioritize kindness and helpfulness, creating a professional network where everyone can advance their career safely.

This is a long-term partnership. To renew your spot each year, we look for continued growth through new project submissions and engagement with your peers. Staying connected means dropping into Discord at least once every 60 days to share your progress.

We’re ready to build the future of the visual web with you. Visit our Community page to find your path and start your journey from learner to creator today. Let's go!

Cloudinary ❤️ developers
Ready to level up your media workflow? Start using Cloudinary for free and build better visual experiences today.
👉 Create your free account

Streamlining Your Next.js Projects with Supabase and Drizzle ORM

eugene musebe — Sat, 02 Mar 2024 10:50:17 +0000

This guide showcases how to build an efficient application using Supabase for data handling, complemented by Drizzle ORM for advanced database schema management in TypeScript. Starting with database seeding, we aim to demonstrate effective data retrieval, leveraging Drizzle ORM's intuitive blend of SQL-like and relational data access. Drizzle ORM not only simplifies database interactions but also introduces a suite of tools to enhance development workflows, setting the foundation for a productive and streamlined development experience.

Step 1: Setting Up Your Next.js Environment

To start your Next.js project, execute the command npx create-next-app@latest syncleaf. This quickly sets up a fresh Next.js application named syncleaf

npx create-next-app@latest syncleaf

Configuring Drizzle ORM and Environment Variables

Proceed by installing Drizzle ORM, PostgreSQL, and dotenv with the command below in your project directory:

npm install drizzle-orm postgres dotenv

This step incorporates Drizzle ORM for handling database schemas, postgres for interacting with the PostgreSQL database, and dotenv for environment variable management, all crucial for a secure and efficient database connection.

Following this, enhance your development workflow by adding Drizzle Kit as a development dependency:

npm i -D drizzle-kit -D

Think of Drizzle Kit as a magic tool that helps you build and change your database, kind of like building with LEGOs. You tell it how you want your database to look using a special code, and it creates a set of instructions to make or change the database just like that. If you decide to change how your database should look, Drizzle Kit figures out what new instructions are needed and keeps everything organized and safe, so you can always go back and see what changes you made. Plus, you can work on different parts of your database in separate pieces or even work on many databases at once. And if you already have a database, Drizzle Kit can quickly understand how it's built and help you make changes to it super fast!

Setting Up Your Supabase Project

Initiate your Supabase project setup by first logging in at Supabase Login. Once logged in, select "New Project" and name it "Syncleaf." It's essential to generate and save a secure database password for later use. Choose the server region that offers the best performance for your target audience. After filling in all the required fields, click "Create new project." Securely store the database password as you will need it for your .env file to establish a database connection.

For a visual guide, refer to the image provided below.

After creating your project, you'll be taken to a screen displaying all necessary API keys and configuration details, including your project URL, anon key for client interactions, and service role key for backend operations. These are crucial for connecting your Next.js app securely with Supabase, so make sure to accurately copy them into your .env file for future use.

Configure Environment Variables

Create a .env file at the root of your project to securely store your database credentials. These values are provided by Supabase as highlighted above :

DATABASE_URL=
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SERVICE_ROLE_KEY=
PW=

Drizzle Configuration Setup

Create a drizzle.config.ts file at the root of your project to configure Drizzle ORM's interaction with your database.

Here is the content for the configuration file:

import type { Config } from 'drizzle-kit';
import * as dotenv from 'dotenv';
dotenv.config({ path: '.env' });

if (!process.env.DATABASE_URL) {
  console.log('🔴 Cannot find database url');
}

export default {
  schema: './src/lib/supabase/schema.ts',
  out: './migrations',
  driver: 'pg',
  dbCredentials: {
    connectionString: process.env.DATABASE_URL || '',
  },
} satisfies Config;

This configuration file serves as a map for Drizzle ORM, pointing it to the location of your database schema files, where to store migration files, and which database driver to use. It also securely pulls in the database connection string from your .env file. This setup is essential for enabling Drizzle ORM to manage your database schema and migrations effectively.

Following the structure outlined in our drizzle.config.ts configuration, let's proceed to create the files and directories:

Defining the Database Schema

For schema definition, place a schema.ts file within the src/lib/supabase/ directory. To set up this file and its required directory structure, execute the command:

mkdir -p src/lib/supabase && touch src/lib/supabase/schema.ts

The schema.ts file is used to define and export data models that closely represent the structure of your database tables. These models facilitate type-safe database operations, ensuring that the data types used in your application match those in your database. This approach significantly enhances development efficiency by enabling autocompletion, reducing runtime errors, and making the codebase easier to understand and maintain.

Add this to it:

import { pgTable, uuid, text, decimal, integer, timestamp } from "drizzle-orm/pg-core";

export const product = pgTable("product", {
    id: uuid('id').defaultRandom().primaryKey().notNull(),
    name: text("name"),
    description: text("description"),
    price: decimal("price", { precision: 10, scale: 2 }), 
    quantity: integer("quantity"),
    image: text("image"), 
    created_at: timestamp("created_at").defaultNow(),
    updated_at: timestamp("updated_at").defaultNow(),
});

This code snippet employs drizzle-orm/pg-core to create a product table model for PostgreSQL integration with Supabase, ensuring operations adhere to specified data types and schema constraints. This method enhances the reliability and scalability of your application's data layer without detailing individual fields.

Setting Up Database Connection and Utility Functions

Continuing with our setup, we'll now add a db.ts file to the src/lib/supabase directory, crucial for our database connection and utility functions. This step simplifies database interactions, improving maintainability and scalability.

To create the db.ts file:

touch src/lib/supabase/db.ts

This prepares us to define our connection and utilities.

Add the following content to the db.ts file to set up your database connection and utilities:

import { drizzle } from 'drizzle-orm/postgres-js';
import postgres from 'postgres';
import dotenv from 'dotenv';
import * as schema from '../../../migrations/schema';

dotenv.config();

if (!process.env.DATABASE_URL) {
  console.error('❌ Error: Database URL is not specified in the environment variables.');
  process.exit(1);
}

const client = postgres(process.env.DATABASE_URL, { max: 1 });

const db = drizzle(client, { schema });

console.log('Database connection successfully established.');

export default db;

This script sets up the database connection using drizzle-ORM and postgres, with configurations managed via environment variables. It ensures the DATABASE_URL is available, initializes the connection, and indicates a successful setup. The drizzle client is then made available for application-wide usage.

Enhancing Database Management with Drizzle Scripts

To efficiently manage and interact with your database using Drizzle, add the following scripts to your package.json. These scripts provide convenient commands for database operations such as schema synchronization, introspection, generation, migration, and seeding:

"scripts": {
  "push": "drizzle-kit push:pg",
  "pull": "drizzle-kit introspect:pg",
  "generate": "drizzle-kit generate:pg",
  "drop": "drizzle-kit drop",
  "check": "drizzle-kit check:pg",
  "up": "drizzle-kit up:pg",
  "migrate": "npx tsx scripts/migrations/migration.ts",
  "studio": "drizzle-kit studio",
  "seed": "npx tsx scripts/seed.ts"
}

These scripts simplify the process of keeping your database schema in sync with your codebase, managing migrations, and seeding data for development and testing.

Generating Migration Files for PostgreSQL with Drizzle

Execute the npm run generate command to initiate migration file creation:

npm run generate

Running npm run generate triggers drizzle-kit generate:pg, analyzing your PostgreSQL schema and auto-generating a migration file for streamlined schema management. Following this command, a migrations folder will be created at the root of your project, as directed by the out: './migrations' setting in drizzle.config.ts, ensuring an organized approach to tracking database schema changes.

Setting Up the Migration Script

To organize your project's migration scripts, first create a scripts folder at the root of your project directory, then add a migrations folder within it, and finally create a migration.ts file inside this folder. Use the following command to set up this structure:

mkdir -p scripts/migrations && touch scripts/migrations/migration.ts

This command ensures the necessary directories and files are created in your project, ready for you to add your migration logic.

Add the following content to your migration.ts file to handle database migrations:

import db from '../../src/lib/supabase/db';
import { migrate } from 'drizzle-orm/postgres-js/migrator';
import dotenv from 'dotenv';

dotenv.config();

const migrateDatabase = async (): Promise<void> => {
    console.log('🚀 Starting database migration...');

    try {
        await migrate(db, { migrationsFolder: 'migrations' });
        console.log('✅ Successfully completed the database migration.');
        process.exit(0);
    } catch (error) {
        console.error('❌ Error during the database migration:', error);
        process.exit(1);
    }
};

migrateDatabase();

This script initializes the environment variables, then defines and executes a function to migrate the database using drizzle-ORM. It logs the start and successful completion of the migration process or catches and logs any errors encountered, ensuring a clear status update during the migration process.

Executing the Migration Script

To execute the migration script and apply your database changes, run the following command:

npm run migrate

Upon successful execution, you'll notice new files within the migrations folder, indicating that the migration scripts have been generated and run. Additionally, by checking your Supabase database, you should find the products table created, complete with all the fields you've previously defined.

For a more interactive view of your database schema and to manage your data directly, use the command:

npm run studio

This will launch Drizzle-Kit Studio, utilizing your project's Drizzle configuration file to connect to your database. Drizzle Studio provides a user-friendly interface for browsing your database, as well as adding, deleting, and updating entries according to your defined Drizzle SQL schema.

Populating the Products Table with Seed Data

With the products table in place, it's time to populate it with some sample data. To achieve this, we'll utilize the faker library to generate realistic product information seamlessly. This approach not only simplifies the process of creating diverse data sets but also enhances the testing and development experience by providing a rich dataset to work with.

Ensure faker is installed in your project by running:

npm install @faker-js/faker

Next, create the seed.ts file by executing the following command:

touch scripts/seed.ts

Now, add the following contents to your seed.ts file:

import { drizzle } from 'drizzle-orm/node-postgres';
import { Pool } from 'pg';
import { product } from '../src/lib/supabase/schema'; 
import { faker } from '@faker-js/faker';
import * as dotenv from 'dotenv';

dotenv.config({ path: './.env' });

if (!process.env.DATABASE_URL) {
    console.error('DATABASE_URL not found in .env');
    process.exit(1);
}

const main = async () => {
    const pool = new Pool({
        connectionString: process.env.DATABASE_URL,
    });
    const db = drizzle(pool);

    const productsData = [];

    for (let i = 0; i < 20; i++) {
        productsData.push({
            name: faker.commerce.productName(),
            description: faker.commerce.productDescription(),
            price: faker.commerce.price({ min: 100, max: 1000, dec: 2, symbol: '' }), 
            quantity: faker.number.int({ min: 1, max: 100 }), 
            image: faker.image.url(), 
        });
    }

    console.log('Seed start');
    await db.insert(product).values(productsData).execute(); 
    console.log('Seed done');
    await pool.end();
};

main().catch((error) => {
    console.error('Failed to seed products:', error);
    process.exit(1);
});

To populate your database with 20 unique product entries, execute the command npm run seed. This command triggers a script that connects to your database, generates product entries using faker, and inserts them into the products table, creating a foundational dataset for development and testing.

After running npm run seed, review your Supabase database or drizzle-kit studio to confirm the successful population of product entries, as shown in the provided screenshot. This confirms the success of your migration and seeding efforts, setting the stage for application development.

Wrapping Up

In conclusion, leveraging Drizzle ORM has empowered us to streamline database population, schema evolution, and data manipulation seamlessly. This efficiency has greatly expedited our development journey, furnishing us with a sturdy groundwork for constructing and expanding our application.

Reference

GitHub Repository - https://github.com/musebe/Drizzle-supabase
Deployed Demo - https://drizzle-supabase.vercel.app/
Supabase - https://supabase.io
Drizzle ORM Documentation - https://orm.drizzle.team/
Drizzle ORM Kit Documentation - https://orm.drizzle.team/kit-docs/overview

ClerkDocs for VSCode: Essential Snippets for Clerk Components

eugene musebe — Fri, 18 Aug 2023 12:05:39 +0000

Introduction

Introducing the ClerkDocs VSCode Extension: Your essential toolkit for Next.js development. Dive into a curated collection of snippets tailored for Clerk components, optimized for both JavaScript and TypeScript environments. With the debut of version 1.0.0 focusing on Next.js, we're gearing up to roll out support for additional language SDKs in the near future. Boost your productivity and elevate your coding experience with ClerkDocs.

Why ClerkDocs is Essential

ClerkDocs offers developers a set of snippets for easy integration of Clerk components into Next.js applications. This tool streamlines the development process, allowing for faster and error-free setups. By simplifying the integration, developers can concentrate on crafting robust Next.js applications with advanced user management. From authentication to user profiles, ClerkDocs provides quick access to dependable snippets, minimizing development time and potential mistakes.

Key Features

Snippet Collection: A diverse range of snippets tailored for Clerk components.
Ease of Use: Intuitive design for quick integration into Next.js projects.
Compatibility: Optimized for Next.js(js/ts) with plans for broader SDK support in future updates.

Installation Guide

Open your VSCode and head to the extensions store.
Search for "ClerkDocs" to locate the extension.
Click on "Install" to add it to your VSCode.

Alternatively, you can directly download it from the VSCode Marketplace

Snippets Overview

Download the PDF version of Clerk Snippets for Next.js

This table provides a comprehensive overview of the Clerk snippets available for Next.js.

No	Prefix	Description
1	clerkImport	Snippet for Clerk import with cursor placement for components
2	clerkUp	Snippet for Clerk SignUp page in Next.js
3	clerkIn	Snippet for Clerk SignIn page in Next.js
4	clerkOutBtn	Snippet for Clerk SignOutButton in Next.js
5	clerkUserBtn	Snippet for Clerk UserButton in Next.js
6	clerkUserProfile	Snippet for Clerk UserProfile in Next.js
7	clerkOrgP	Snippet for Clerk OrganizationProfile in Next.js
8	clerkOrgC	Snippet for Clerk CreateOrganization in Next.js
9	clerkOrgS	Snippet for Clerk OrganizationSwitcher in Next.js
10	clerkMiddleware	Snippet for Clerk middleware setup in Next.js
11	clerkEnv	Snippet for Clerk environment variables in Next.js
12	clerkAuth	Snippet for using the auth() helper function with Clerk in Next.js.
13	clerkCurrentUser	Snippet for fetching the current user using Clerk in Next.js.
14	clerkGetAuthAPI	Snippet for using the getAuth() helper with Clerk in a Next.js API route.
15	clerkClientAPI	Snippet for using the `clerkClient` helper with Clerk in a Next.js API route.
16	clerkUseAuth	Snippet for using the `useAuth` hook with Clerk in a Next.js application.
17	clerkUseUser	Snippet for using the `useUser` hook with Clerk in a Next.js application.
18	clerkProvider	Snippet for using the `<ClerkProvider>` component with Clerk in a Next.js application.
19	clerkUseOrg	Snippet for accessing the current active organization's attributes using Clerk in Next.js.
20	clerkUseOrgList	Snippet for accessing the list of available Organizations and OrganizationMemberships the user belongs to using Clerk in Next.js.
21	clerkUserList	Snippet for retrieving a list of users using Clerk in Next.js.
22	clerkUserListOrd	Snippet for retrieving an ordered and filtered list of users using Clerk in Next.js.
23	clerkGetUser	Snippet for retrieving a single user by their ID using Clerk in Next.js.
24	clerkGetUserCount	Snippet for retrieving the total number of users or the total number of users matching a specific query using Clerk in Next.js.
25	clerkUpdateUser	Snippet for updating a user with a given ID and provided attribute values using Clerk in Next.js.
26	clerkDeleteUser	Snippet for deleting a user with a given ID using Clerk in Next.js.
27	clerkCreateOrg	Snippet for creating an organization using Clerk in Next.js.
28	clerkCreateOrgInv	Snippet for creating an organization invitation using Clerk in Next.js.
29	clerkCreateOrgMem	Snippet for creating an organization member using Clerk in Next.js.
30	clerkDeleteOrg	Snippet for deleting an organization using Clerk in Next.js.
31	clerkDeleteOrgMem	Snippet for deleting an organization member using Clerk in Next.js.
32	clerkGetOrg	Snippet for retrieving an organization using Clerk in Next.js.
33	clerkGetOrgList	Snippet for retrieving a list of organizations using Clerk in Next.js.
34	clerkGetOrgMemList	Snippet for retrieving a list of organization members using Clerk in Next.js.
35	clerkGetPendOrgInv	Snippet for retrieving a list of pending organization invites using Clerk in Next.js.
36	clerkRevokeOrgInv	Snippet for revoking an organization invite using Clerk in Next.js.
37	clerkUpdateOrg	Snippet for updating an organization using Clerk in Next.js.
38	clerkUpdateOrgMeta	Snippet for updating organization metadata using Clerk in Next.js.
39	clerkUpOrgMemMeta	Snippet for updating organization member metadata using Clerk in Next.js.

Your Input Matters!

Your experience with ClerkDocs matters to me. I encourage you to share your thoughts, suggestions, and any feedback you might have regarding the extension. Your insights will help me refine and enhance ClerkDocs for an even better user experience.

If you encounter any issues or have specific recommendations, please don't hesitate to open an issue on our GitHub repository. Your active participation will greatly contribute to the continuous improvement of ClerkDocs.

Open-Source Contributions

I'm proud to share that ClerkDocs is an open-source project. If you're a developer eager to contribute, I wholeheartedly welcome your expertise! Whether you're looking to improve existing features, suggest new ones, or report bugs, your input is invaluable. Dive into the code, make enhancements, or simply share your innovative ideas. Together, we can make ClerkDocs the ultimate extension for Clerk components in Next.js.

For those interested in contributing or exploring the codebase, you can find the project on GitHub .

Links and Resources

Implementing Role-Based Access Control in Next.js App Router using Clerk Organizations

eugene musebe — Mon, 31 Jul 2023 18:52:21 +0000

Introduction

It is crucial to protect user data and control access to various application features in the dynamic world of web development. RBAC, or role-based access control, has become a well-liked and successful method of controlling permissions within web applications. RBAC enables developers to design a customised and secure user experience by assigning specific roles to users and defining their access rights in accordance with those roles. In this article, we'll examine how RBAC is implemented in the Next.js App Router using Clerk, a cutting-edge platform for user management and authentication.

We will look at how Clerk uses Organizations to simplify user authentication and role assignment, thereby streamlining RBAC integration into Next.js applications. Following this comprehensive guide will equip developers to build web applications that prioritise security and provide a tailored experience to each user based on their assigned role.

Prerequisites

Make sure you have the following prerequisites in place before implementing Role-Based Access Control in the app using Next.js and Clerk:

Fundamentals of web development (HTML, CSS, and JavaScript).
Basic understanding of React/Next.js.
Node.js and npm must be installed.
A code editor (Visual Studio Code).
Git for version control - optional.
An account with Clerk.com for authentication.

With these prerequisites in place, you can use Clerk to implement Role-Based Access Control in your Next.js application. If you haven't met any of these requirements, take the time to do so before proceeding with the tutorial.

Github Repository and Live Demo

You can access the source code of the application on GitHub at https://github.com/musebe/nextjs-clerk-organizations-rbac-authentication.

To see the completed application in action, visit https://nextjs-clerk-organizations-rbac-authentication.vercel.app.

Setting up Clerk and Clerk Organizations

The first step in using Clerk is to create a Clerk account. You can do this by going to clerk.com and creating a free account. You will be prompted to create a new application within your account after signing in. This application will serve as your starting point for exploring and utilising Clerk's various features and capabilities, which are highlighted below.

After signing in, click the 'Add application' button. Give your app a name and select all of the 'Social authentication' methods you want your users to use.

Creating Clerk Organizations

Now, it's time to create an organization. In Clerk, organizations serve as shared accounts, enabling collaboration among members across shared resources. Within an organization, there are members with elevated privileges, responsible for managing access to the organization's data and resources. These privileged members have the authority to grant or revoke permissions, ensuring seamless cooperation and secure control over the organization's assets.

To create an organization in Clerk after logging in and being on the home dashboard, follow these steps:

Click on the "Create Organization" button, and a new form or modal will appear, prompting you to provide the necessary information for the organization.
Fill in the required details for the organization, such as the organization name, logo, and any other relevant information.
Click on the Create button to finalize the creation of the organization.
Clerk will then create the organization, and you will be redirected to the newly created organization's dashboard.

Adding members to an Organization

To add members to the Clerk organization, follow these steps:

Navigate to the Members section: After selecting the organization in Clerk's dashboard, navigate to the "Members" section, this is where user management is handled.
Click on Add Members: Look for the "Add Members" button within the "Members" section and click on it to initiate the process.
A pop-up form will appear: Once you click on "Add Members," a pop-up window will show up on your screen, providing a form to input the necessary details.
Search for the user: In the pop-up form, you can search for the specific user you want to add to the organization. Enter their email address or username in the search field.
Choose a role: For each user you add, you can assign them a role within the organization. Clerk typically offers two roles: admin and basic_member. Select the appropriate role for the user based on their level of access and permissions.

admin - The admin role grants complete access to all organisational resources. Members with the admin role have administrator privileges and can fully manage organisations and memberships in organisations.
- basic_member - The basic_member role is the default role for an organization's users. The availability of organisational resources is restricted. Basic members cannot manage organisations or memberships in organisations, but they can view information about the organisation and its members.
- Click Add : Once you have verified the details, click the "Add" or "Confirm" button to finalize the addition of the user to the organization with the specified role.

Congratulations! You have successfully created an organization in Clerk. From the organization dashboard, you can manage users, roles, and other resources associated with the organization.

Next.js Setup

Now to the fun part! Let's spin up a new Next.js project to get started with implementing Role-Based Access Control (RBAC). To do this, simply navigate to the directory of your choice and run the following command in your terminal or command prompt:



npx create-next-app my-rbac-app

Replace my-rbac-app with your desired project name. This command will set up a new Next.js project for you with all the necessary configurations to begin building your RBAC-enabled web application.

The best part is that starting from Next.js version 13, Tailwind CSS comes pre-configured by default, saving you the trouble of installing it separately. With Next.js and Tailwind CSS ready to go, you can now focus on integrating RBAC using Clerk into your freshly created Next.js project. So, let's get started and secure your web application with personalized user access and permissions!

Integrating Clerk with Next.js

The next step after creating the Next.js project and having Tailwind CSS set up is to integrate Clerk into your application for handling user authentication and role-based access control. Follow these steps to proceed:

Install Clerk SDK: Use npm or yarn to install the Clerk SDK in your Next.js project. The Clerk SDK provides the necessary tools to authenticate users and manage roles. Run the following command in your project's root directory:



npm install @clerk/nextjs

Initialize Clerk in your Next.js App: Import the Clerk SDK into your Next.js application and initialize it with your Clerk API credentials. This step enables your application to interact with Clerk's authentication services. In Next 13 using the app router, the initialization is done in the layout.js file as highlighted below :



// app/layout.js
import '@styles/globals.css';
import { ClerkProvider } from '@clerk/nextjs';


export const metadata = {
  title: 'Clerk-Organizations',
  description: 'Clerk Role-Based Authentication Using Organizations',
};

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html lang='en'>
        <body>
          <div className='main'>
            <div className='gradient' />
          </div>
          <main className='app'>
            {children}
          </main>
        </body>
      </html>
    </ClerkProvider>
  );
}

Obtain Clerk API Credentials: To initialize the Clerk SDK, you'll need API credentials specific to your Clerk organization. Retrieve these credentials from the Clerk dashboard on the left sidebar under the API Keys tab. Copy the keys and paste them in the .env file we are going to create .

In your Next.js project's root directory, generate a new file named .env.local. Once created, paste the CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY environment variables that you previously copied from the Clerk dashboard into this .env.local file. Storing these keys in the .env.local file ensures that your sensitive credentials are securely accessible by your Next.js application during runtime, safeguarding them from being exposed in your codebase. Remember to refrain from sharing or committing the .env.local file to version control to maintain the confidentiality of your environment variables.



NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="<Your Publishable Key>"
CLERK_SECRET_KEY="<Your Clerk Secret Key>"

Having completed the setup and configurations as described above, it is now time to begin establishing the application layout in the project.

Application Layout

The next step is to create the application layout and pages. We will organize our pages using the folder-based approach provided by Next.js 13. Inside the app directory, we shall create three separate folders named Profile, Users, and Admin, each containing a page.jsx file. These files will serve as the components for our respective pages. In the Profile page, we will provide users with personalized information and options to manage their accounts. The Users page will display general user-related data and interactions. Lastly, the Admin page will serve as a dashboard for administrators, granting them access to oversee and control various aspects of the application. This organized structure will enhance code maintainability and make it easier to extend our Next.js app as it grows in functionality.

Inside the app directory, create three separate folders for each page: Profile, Users, and Admin. Within each folder, create a page.jsx file with the content for each page.

Here's how you directory structure should look like :



- your-nextjs-app
  - app
    - profile
      - page.jsx
    - users
      - page.jsx
    - admin
      - page.jsx

Now, let's update the content of each page.jsx file accordingly:

Profile/page.jsx:



const Profile = () => {
  return (
    <div>
      <h1>Welcome to the Profile Page!</h1>
      {/* Add any content or components specific to the Profile page here */}
    </div>
  );
};

export default Profile;

Users/page.jsx:



const Users = () => {
  return (
    <div>
      <h1>Welcome to the Users Page!</h1>
      {/* Add any content or components specific to the Users page here */}
    </div>
  );
};

export default Users;

Admin/page.jsx:



const Admin = () => {
  return (
    <div>
      <h1>Welcome to the Admin Page!</h1>
      {/* Add any content or components specific to the Admin page here */}
    </div>
  );
};

export default Admin;

Now, the pages will be accessible using the following URLs:

Profile: http://localhost:3000/profile
Users: http://localhost:3000/users
Admin: http://localhost:3000/admin

This organized approach will ensure a clear separation of concerns and make it easier to manage and scale your Next.js app.

Navbar

Onto the Navbar! Let's begin by creating a components folder at the root of your Next.js app. Inside this new folder, we will place a file named Navbar.jsx to contain our Navbar component. This step will help us organize and manage reusable components more efficiently.

Here's what the folder structure will look like after completing this step:



- your-nextjs-app
  - components
    - Navbar.jsx
  - app
    - Profile
      - page.jsx
    - Users
      - page.jsx
    - Admin
      - page.jsx
  - pages
    ... other pages if any ...

Once the components folder is created, paste the content below into the new Navbar.jsx file located inside the components folder.



import Link from 'next/link';

const Navbar = () => {
  const links = [
    { title: 'Profile', url: '/profile' },
    { title: 'Dashboard', url: '/user' },
    { title: 'Admin Dashboard', url: '/admin', role: 'admin' },
    // Add more placeholder links as needed
  ];

  return (
    <header className='text-gray-600 body-font bg-white shadow'>
      <div className='container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center justify-between'>
        <div className='flex items-center'>
          <a
            href='/'
            className='flex title-font font-medium items-center text-gray-900'
          >
            <svg
              xmlns='http://www.w3.org/2000/svg'
              fill='none'
              stroke='currentColor'
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth='2'
              className='w-10 h-10 text-white p-2 bg-indigo-500 rounded-full'
              viewBox='0 0 24 24'
            >
              <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'></path>
            </svg>
            <span className='ml-3 text-xl'>SecureClerk</span>
          </a>
        </div>
        <nav className='md:ml-auto md:mr-auto flex flex-wrap items-center text-base justify-center'>
          <Link href='/profile'>
            <div className='mr-5 cursor-pointer hover:text-gray-900'>
              Profile
            </div>
          </Link>
          <Link href='/user'>
            <div className='mr-5 cursor-pointer hover:text-gray-900'>
              Dashboard
            </div>
          </Link>
          <Link href='/admin'>
            <div className='mr-5 cursor-pointer hover:text-gray-900'>
              Admin Dashboard
            </div>
          </Link>
          {/* Add more links directly here as needed */}
        </nav>
        <div className='md:flex items-center'>
          <a href='/sign-in'>
            <button className='text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none hover:bg-indigo-600 rounded text-base mr-4'>
              Login
            </button>
          </a>
          <a href='/sign-up'>
            <button className='text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none hover:bg-indigo-600 rounded text-base'>
              Sign Up
            </button>
          </a>
        </div>
      </div>
    </header>
  );
};

export default Navbar;

The next step is to modify the Layout.js file to include the Navbar component so that it can be used by the entire app. We'll import the Navbar component into the Layout.js file and render it within the layout structure. This way, the Navbar will be present across all pages wrapped within the RootLayout.

Here's the updated Layout.js file:



// app/Layout.js
import '@styles/globals.css';
import { ClerkProvider } from '@clerk/nextjs';
import Navbar from '../components/Navbar'; // Import the Navbar component

export const metadata = {
  title: 'Clerk-Organizations',
  description: 'Clerk Role-Based Authentication Using Organizations',
};

export default function RootLayout({ children }) {
  return (
    <ClerkProvider>
      <html lang='en'>
        <body>
          <div className='main'>
            <div className='gradient' />
          </div>
          <main className='app'>
            <Navbar /> {/* Include the Navbar component here */}
            {children}
          </main>
        </body>
      </html>
    </ClerkProvider>
  );
}

With this in place, the Navbar component provides a user-friendly navigation interface for our Next.js app. It includes links for "Profile," "Dashboard," and "Admin Dashboard," enabling seamless client-side navigation to the corresponding pages when clicked.

Sign in and sign up Components

Clerk offers a selection of pre-built components that seamlessly integrate sign-in, sign-up, and other user management features into your Next.js application. To leverage these functionalities, you can utilize the <SignIn /> and <SignUp /> components along with Next.js' optional catch-all route.

To implement this, within the "app" folder of your project, create two new directories named "sign-up" and "sign-in." Inside each directory, place the corresponding code for the sign-up and sign-in functionalities following this structure: sign-up/[[...sign-up]]/page.jsx.

Below, find the code for the Sign In and Sign Up components using the Clerk components provided by @clerk/nextjs.

Sign In Component:



// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from '@clerk/nextjs';

const SignInPage = () => {
  return (
    <div>
      <h1>Sign In</h1>
      <SignIn />
    </div>
  );
};

export default SignInPage;

Sign Up Component:



// app/sign-up/[[...sign-up]]/page.tsx
import { SignUp } from '@clerk/nextjs';

const SignUpPage = () => {
  return (
    <div>
      <h1>Sign Up</h1>
      <SignUp />
    </div>
  );
};

export default SignUpPage;

After adding the two pages, the updated project directory structure will look like this:



- your-nextjs-app
  - components
    - Navbar.jsx
  - app
    - Profile
      - page.jsx
    - Users
      - page.jsx
    - Admin
      - page.jsx
    - sign-up
      - [[...sign-up]]
        - page.tsx
    - sign-in
      - [[...sign-in]]
        - page.tsx
  - pages
    ... other pages if any ...

With the setup completed, when you visit the route http://localhost:3000/sign-in, you will be able to load Clerk's login page, as demonstrated below:

Protecting your application routes

It's time to decide which pages are public and which require authentication now that Clerk has been installed and mounted in your application. We achieve this by declaring the public and private routes in a file called middleware.js at the project's root. In our situation, we only want the home page to be viewable by the general public and the remaining portions of the page to be hidden until the user logs into the application. The code below makes it possible to achieve this:



import { authMiddleware } from '@clerk/nextjs';

export default authMiddleware({
  publicRoutes: ["/"]
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

Hero Component

To finalize the layout, let's beautify the homepage by adding some content to it. We'll start by creating a Hero.jsx page in the components folder and then embed it into the page.jsx file located inside the app directory.

This component will serve as the hero section of the homepage.



// components/Hero.jsx
const Hero = () => {
  return (
    <div className="hero">
      {/* Your hero content and layout here */}
      <h1>Welcome to Our Website</h1>
      <p>Discover amazing things with us!</p>
    </div>
  );
};

export default Hero;

Next, go to the page.jsx file inside the app directory and update it to include the Hero component:



// app/page.jsx
import { Hero } from "@components";

export default function Home() {
  return (
    <main className='overflow-hidden'>
      <Hero />
      {/* Other content and components for the Home page can be added here */}
    </main>
  );
}

Now, with the Hero component embedded in the Home page, you have a beautiful hero section displayed at the top of the homepage. You can further enhance the layout by adding additional content and components to the Home page as needed. This will create an engaging and visually appealing homepage for your Next.js app.

Your Final project structure should look like this upto this point :



- your-nextjs-app
  - components
    - Hero.jsx
    - Navbar.jsx
  - app
    - profile
      - page.jsx
    - users
      - page.jsx
    - admin
      - page.jsx
    - sign-up
      - [[...sign-up]]
        - page.tsx
    - sign-in
      - [[...sign-in]]
        - page.jsx
    - layout.jsx
    - page.jsx
  - styles
    - globals.css
  - node_modules
  - public
    - favicon.ico
    ... other public files ...
  - package.json
  - next.config.js

Navbar links Conditional Rendering

For conditional link rendering, we will utilize Clerk's SignedOut, UserButton, and SignedIn components. When a user is not signed in, we will display only the "Login" and "Sign Up" buttons. However, once the user is logged in, we will show the navigation links alongside Clerk's UserButton component, which facilitates the sign-out functionality. This approach enables us to dynamically adjust the content displayed in the Navbar based on the user's authentication status.

To achieve this functionality, on the Navbar component, import the following components from Clerk's Next.js library:



import { SignedOut, UserButton, SignedIn } from '@clerk/nextjs';

These components will allow you to conditionally render content based on the user's authentication status, enabling you to show different elements for signed-in and signed-out users in the Navbar.

After logging in, it becomes necessary to verify the user's role, distinguishing between "admin" and "basic_member," and accordingly display the "Profile" and "Dashboard" links only for "basic_member," while showing all links for "admin." We can obtain this information using Clerk's useSession hook, which allows access to the session status. To achieve this, simply include the useSession hook within the Clerk object you previously imported. By doing so, you will be able to fetch the user's role from the session data and conditionally render the appropriate links in the Navbar.



import { SignedOut, UserButton, SignedIn, useSession } from '@clerk/nextjs';

To simplify the role-checking process, let's create a utility function that will iterate through the session data and return the user's role. To do this, create a new folder named utils at the root of the project and add a file called userUtils.js inside it. In userUtils.js, implement the following function:



function checkUserRole(session) {
  if (
    !session ||
    !session.user ||
    !session.user.organizationMemberships ||
    session.user.organizationMemberships.length === 0
  ) {
    return null; // Return null if the user is not a basic member
  }

  const organizationMemberships = session.user.organizationMemberships;

  // Loop through all organization memberships
  for (const membership of organizationMemberships) {
    if (membership.role) {
      return membership.role.toLowerCase(); // Return the role in lowercase if it exists
    }
  }

  return null; // Return null if no role is found in the memberships
}

export { checkUserRole };

This function will allow us to extract and determine the user's role from the session data, making it easier to handle role-based actions in the application.

The next step is to export the checkUserRole function from the userUtils.js file so that it can be used in the Navbar component. To achieve this, use the following import statement in the Navbar component:



import { checkUserRole } from '../utils/userUtils';

Inside the Navbar component, we can determine the user's role from the session data as follows:



const { session } = useSession();
const userRole = checkUserRole(session);

By utilizing the useSession hook from Clerk, we retrieve the user's session data. Then, we call the checkUserRole function with the session parameter, which enables us to obtain the user's role. This way, we can efficiently check the user's role within the Navbar component and conditionally render the appropriate links based on the role information.

After the user has signed in, we can utilize the userRole information to determine which links should be displayed for administrators and basic members.



<SignedIn>
  {links.map((link) =>
    (link.role === 'admin' && userRole === 'admin') || !link.role ? (
      <Link key={link.title} href={link.url}>
        {/* Use a div instead of an anchor tag */}
        <div className='mr-5 cursor-pointer hover:text-gray-900'>
          {link.title}
        </div>
      </Link>
    ) : null
  )}
</SignedIn>

When the user is signed in, the SignedIn component allows us to conditionally render the navigation links based on the user's role. The links.map function iterates through the links array, and for each link, it checks if the link is intended for administrators (link.role === 'admin') and if the user actually has an "admin" role (userRole === 'admin'). If both conditions are met or if the link does not have a specific role assigned (!link.role), the link is displayed using the Link component from Next.js, enclosed within a div element for proper styling. This way, we can selectively show the appropriate links based on the user's role after they have signed in.

Here's how you should arrange the SignedOut and UserButton components:



{/* SignedOut Component */}
<SignedOut>
  <a href='/sign-in'>
    <button className='text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none hover:bg-indigo-600 rounded text-base mr-4'>
      Login
    </button>
  </a>
  <a href='/sign-up'>
    <button className='text-white bg-indigo-500 border-0 py-2 px-4 focus:outline-none hover:bg-indigo-600 rounded text-base'>
      Sign Up
    </button>
  </a>
</SignedOut>

{/* UserButton Component */}
<SignedIn>
  <div className='ml-4'>
    <UserButton afterSignOutUrl='/' />
  </div>
</SignedIn>

Having completed all the necessary steps, we are now able to conditionally render the application, displaying different links based on the various scenarios we have highlighted. This allows us to customize the Navbar content depending on the user's authentication status, role, and whether they are signed in or signed out. With this implementation, the application provides a seamless and user-specific navigation experience.

Ensuring Role-Based Access Control for the Admin Dashboard Page

Currently, we have successfully hidden the Admin Dashboard link from basic members. However, there is still an issue to address - any user can access the /admin route, even if they are not authorized to do so. This behavior is undesirable and needs to be rectified. Let's proceed to handle this situation to ensure that only users with the admin role can access the Admin Dashboard page.

To implement this functionality, we will utilize the useOrganizationList hook on the admin page. By using the useOrganizationList hook, we gain access to the list of available Organizations and the OrganizationMemberships to which the user is affiliated. This information will enable us to enforce role-based access control and ensure that only authorized users can access the Admin Dashboard page.

We must first import the useOrganizationList hook into the admin page before we can use it. Here's how to go about it:



import { useOrganizationList } from '@clerk/nextjs';

After importing the useOrganizationList hook, you can utilize it to access the organization data. By invoking the hook, you will receive three variables: organizationList, isLoaded, and setActive.



const { organizationList, isLoaded, setActive } = useOrganizationList();

organizationList will hold the list of available organizations, providing important information about each organization and its members. isLoaded is a boolean value that indicates whether the organization data has been successfully loaded and is ready for use. Lastly, setActive is a function that allows you to set the active organization.

The subsequent step involves waiting for the organization data to load and verifying whether the user's role is not admin. We achieve this using the useEffect hook:



useEffect(() => {
  if (isLoaded) {
    // Find the admin organization from the loaded organization list
    const adminOrganization = organizationList.find(
      (org) => org.membership.role === 'admin'
    );

    // If the user is not an admin, redirect to the homepage
    if (!adminOrganization || adminOrganization.membership.role !== 'admin') {
      router.push('/'); // Replace '/' with the homepage URL
    } else {
      // If the user is an admin, no need to wait for the organization list; render the admin page directly
      setShowLoader(false);
    }
  }
}, [isLoaded, organizationList]);

In this useEffect block, we use the isLoaded variable to ensure that we have successfully loaded the organization data. Once the data is available, we look for an organization with the role of 'admin' within the organization list. If the user does not have an admin role or there is no admin organization found, we redirect them to the homepage using the router.push method. However, if the user is indeed an admin, we proceed to render the admin page directly, setting setShowLoader to false to indicate that the loading process is complete. This way, we enforce the role-based access control and appropriately handle navigation based on the user's role.

Conclusion

With these steps, we have successfully implemented Role-Based Access Control in the Next.js App Router using Clerk Organizations. It demonstrates how seamlessly Clerk's features can be integrated into the application, making the process straightforward and efficient. This approach allows us to control user access based on their roles, providing a secure and tailored user experience. Indeed, the integration with Clerk Organizations simplifies the implementation of role-based access, making it a smooth and straightforward process.

If you prefer not to create organizations through the Clerk dashboard, the Clerk team offers components that you can integrate directly into your codebase to handle organization management. For more details, you can explore the documentation at: https://clerk.com/docs/organizations/overview. These components provide a convenient way to manage organizations and memberships within your application, giving you flexibility and control over the organization setup process.

Refference

For further guidance and information, refer to the following:

Next.js Documentation: Access the official Next.js documentation at https://nextjs.org/docs for in-depth details about the framework.
Clerk Documentation: Explore Clerk's authentication capabilities and integration guides at https://clerk.com/docs to understand its usage better.
Simplifying Authentication in Next.js Applications with Clerk: Find detailed steps for setting up Clerk authentication in Next.js apps in the blog post: Dev.to Link.

Building a Todo App with Next.js 13, Clerk, and Supabase.

eugene musebe — Wed, 19 Jul 2023 16:41:02 +0000

Introduction

In this guide, we will embark on a journey to build a sleek and powerful Todo application using the latest technology stack, Next.js 13, Clerk for Authentication, and Supabase as the database. With the seamless integration of Clerk and Supabase into Next.js applications, we'll discover how this combination forms a robust foundation for modern web applications, providing security, scalability, and ease of development.

Throughout this blog post, we'll delve into the step-by-step process of setting up Clerk authentication in a Next.js 13 application, ensuring secure access to our Todo app. Then, we'll explore the seamless integration of Supabase, witnessing how it effortlessly handles data storage and retrieval while providing real-time updates for a smoother user experience.

This is a continuation of the blogpost : Simplifying Authentication in Next.js Applications with Clerk hence we shall be focusing on intergrating clerk with Supabase

Let's dive in and discover the magic of building a minimalistic Todo app with Next.js 13, Clerk, and the Supabase database!

Prerequisites

Before building the Todo app, make sure you have:

Basic web development skills (HTML, CSS, JavaScript).
Familiarity with Next.js basics.
Node.js and npm installed.
A code editor.
Optional: Git for version control.
A Supabase account for the database.
A Clerk account for authentication.

With these prerequisites, you're all set to start creating your Todo app using Next.js 13, Clerk, and Supabase. Let's begin!

Github Repository

Find the starting code on the main branch : https://github.com/musebe/Nextjs-Clerk. For the final codebase, check out the supabase branch https://github.com/musebe/Nextjs-Clerk/tree/supabase. Happy coding!

Getting Started

To get started clone the main branch from the Github repository Simplifying Authentication in Next.js Applications with Clerk. The will act as the starting point for our application as its already setup with Authentication.

To clone the applicarion run the following command :

git clone https://github.com/musebe/Nextjs-Clerk.git

Navigate to the project directory and run the following command to install all the project dependencies :

npm install

To start the application run the command :

npm run dev

Supabase Setup

Supabase is an open-source Backend-as-a-Service (BaaS) platform that aims to simplify the development of web and mobile applications. It provides developers with a suite of tools and services to quickly build and scale applications without having to worry about server management or infrastructure setup.

One of the key features of Supabase is real-time updates. It leverages PostgreSQL's capabilities to provide instant and synchronized data updates to clients, making it ideal for applications that require real-time collaboration or live data streams.

To get started, follow the following steps

Step 1: Sign Up for a Supabase Account

To begin your journey with Supabase, head over to supabase.com and click on the Sign Up button located in the top right corner of the page. You can choose to sign up using your GitHub or Google account for a quick registration process. Alternatively, provide your email address and fill in the necessary details to create an account.

Step 2: Create a New Project

Once you have successfully signed up and logged in, you will be directed to your Supabase dashboard. Here, click on the New Project button to create a new project. Give your project a meaningful name and select the preferred region for data storage. Supabase offers multiple regions to ensure low-latency access to your data as highlighted below :

Step 3: Set Up Your Database

After creating your project, you will land on the project overview page. From the left sidebar, select the SQL Editor tab. To set up a new database, click on "Create table" template and run the following query.

CREATE TABLE todos (
  id BIGINT GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  user_id VARCHAR,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, NOW()) NOT NULL,
  completed_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, NOW()) NOT NULL,
  todo VARCHAR,
  tag VARCHAR
);

The Supabase query above creates a table named "todos" with the following columns:

id (bigint): This column is an auto-generated primary key of type bigint. It will automatically assign a unique identifier to each row added to the table.
user_id (varchar): This column stores the user identifier associated with the todo. It is of type varchar, which means it can hold alphanumeric characters and symbols.
created_at (timestamp with time zone): This column represents the timestamp when the todo was created. It has a default value set to the current time in Coordinated Universal Time (UTC). The now() function retrieves the current timestamp, and the timezone('utc'::text, ...) function ensures it is in UTC format.
completed_at (timestamp with time zone): This column represents the timestamp when the todo was marked as completed. Similar to created_at, it has a default value set to the current time in UTC.
todo (varchar): This column stores the actual todo item, such as a task or reminder. It is of type varchar.
tag (varchar): This column allows categorizing or labeling the todo item with a tag. It is also of type varchar.

After running the query above click on the table editor tab on the left menu and you will see a todos table created with the structure below :

Configure RLS (Row Level Security) for the`todos` table

Configuring Row Level Security (RLS) in Supabase provides an essential layer of data protection and access control for your database tables. RLS allows you to define rules that determine which rows of data a user can access based on their specific attributes or roles. This feature plays a crucial role in enhancing the security and privacy of your application's data.

To create our first row level security run the following command on the SQL Editor

create or replace function requesting_user_id() returns text as $$
  select nullif(current_setting('request.jwt.claims', true)::json->>'sub', '')::text;
$$ language sql stable;

The above is a function named requesting_user_id(). This function returns the user ID (sub claim) extracted from the JSON web token (JWT) included in the request header.

Next we need to create a policy that allows only authenticated users to update their own todos. Run the following query as highlighted below :

CREATE POLICY "Authenticated users can update their own todos"
ON public.todos FOR UPDATE
USING (
    auth.role() = 'authenticated'::text
)
WITH CHECK (
    requesting_user_id() = user_id
);

This code creates a policy named "Authenticated users can update their own todos" on the public.todos table. The policy allows updates to the table only if the user has the role "authenticated" and the requesting user ID matches the user_id column in the table.

To check if the above policies have been applied to our todos database, navigate to the Authentication tab and click the policies button. you should be able to see this :

To finalize the database setup with Supabase, you will need to obtain the Supabase API Key and URL. These credentials are essential for connecting your application to the Supabase database and making authenticated requests to access data or perform CRUD operations.

These credentials serve as your project's authentication tokens. They allow you to interact with the Supabase API securely.

API Key: The API Key acts as your secret key to authenticate requests to the Supabase API. It is a long string of characters and numbers, used to identify and authorize your application.
URL: The URL is the endpoint through which you will make requests to the Supabase API. It typically follows the format https://your-project-id.supabase.co, where your-project-id is replaced with your specific Supabase project ID.

To view your keys click on the Settings tab. This will take you to the project settings where all the keys are stored. Click on the API tab to revel your keys as shown below :

Copy the keys and paste them in the .env file of your project as shown below :

NEXT_PUBLIC_SUPABASE_URL= YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_KEY=YOUR_SUPABASE_ANON_PUBLIC_KEY

Supabase requires JWTs be signed with the HS256 signing algorithm and use their signing key. Find the JWT secret key in your Supabase project under Settings > API in the Config section. Copy the JWT secret

To complete the integration between Supabase and the Clerk authentication service, follow these steps:

Access your Clerk dashboard: Log in to your Clerk account and navigate to the dashboard.
Go to JWT Templates: In the Clerk dashboard, locate the JWT Templates page and click on it. This page allows you to configure JSON Web Token (JWT) templates for different authentication providers.
Create a new template: On the JWT Templates page, click the button to create a new template. Select "Supabase" as the authentication provider for which you want to configure the template.
Set the Signing Key: In the template configuration, find the field labeled "Signing Key" and paste the "JWT secret" key that you previously copied from your Supabase project. This key is essential for securely signing and verifying the JWTs issued by Clerk.

By following these steps and configuring the JWT template in the Clerk dashboard, you have successfully integrated Supabase with Clerk's authentication service. Clerk will now be able to generate and validate JWTs using the Supabase signing key, providing secure and seamless authentication for your application as highlighted below :

Installing Supabase

Congratulations! With the database set up and Clerk configured with Supabase, you are now ready to integrate Supabase into your Next.js project. To do so, follow these simple steps:

Open your Next.js project: Navigate to the root directory of your Next.js project in your terminal or code editor.
Install the Supabase client library: Run the following command to install the official Supabase client library for JavaScript:

npm install @supabase/supabase-js

This command will fetch and install the required @supabase/supabase-js package from the npm registry and add it to your project's dependencies.

Centralizing Supabase Client

To enhance organization and reusability in your Next.js project, we can centralize the creation and configuration of the Supabase client by creating a utils folder at the root of the project structure. Within this folder, we'll add a file named supabaseClient.js. This approach helps maintain clean code and facilitates easier management of the Supabase client across multiple components and pages.

Here's how you can achieve it:

Step 1: Create the utils folder

In your Next.js project, navigate to the root directory and create a new folder named utils.

Step 2: Add supabaseClient.js to the utils folder

Within the utils folder, create a new file named supabaseClient.js.

Step 3: Place the Supabase Client Configuration Code

In the supabaseClient.js file, add the following code to create and configure the Supabase client:

import { createClient } from '@supabase/supabase-js';

export const supabaseClient = async (supabaseToken) => {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_KEY,
    {
      global: { headers: { Authorization: `Bearer ${supabaseToken}` } },
    }
  );

  return supabase;
};

The purpose of this code snippet is to create a Supabase client, which is a client-side library responsible for communication between the frontend application and the Supabase backend. This client enables seamless interaction with the database, making it easier to perform various operations such as querying data, managing real-time updates, and handling authentication.

The supabaseClient function, which is exported from this code snippet, accepts a supabaseToken as an input parameter. This token is typically an authentication token obtained from Supabase, uniquely associated with a user.

Inside the function, the createClient function from the @supabase/supabase-js library is utilized to instantiate the Supabase client. This function requires three arguments: process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_KEY, and an object containing additional configuration options.

The first argument, process.env.NEXT_PUBLIC_SUPABASE_URL, represents the URL of the Supabase project. It is usually stored as an environment variable and serves as the endpoint for server communication.

The second argument, process.env.NEXT_PUBLIC_SUPABASE_KEY, represents the public API key of the Supabase project. Like the URL, this is stored as an environment variable and provides the necessary authentication and authorization for the client.

The third argument is an object that specifies further configuration options for the Supabase client. In this code snippet, it sets the Authorization header for each request using the provided supabaseToken. This ensures that the client is authenticated and authorized to access the relevant resources on the Supabase backend.

Finally, the supabaseClient function returns the configured Supabase client instance, which can then be used across the application to interact with the database and handle real-time updates. By encapsulating the client creation and configuration within this utility, it promotes code reusability and maintains a clean structure within the project.

Performing Requests to Fetch and Post Todos from Supabase: Creating `requests.js` in the `utils` Folder

To handle fetching and posting todos to Supabase, we can create a file named requests.js within the utils folder. This file will contain functions that encapsulate the logic for making API requests to the Supabase database. By doing so, we can keep the API interaction centralized and easily manage todo-related requests in our Next.js project.

Let's go ahead and create the requests.js file:

Step 1: Create requests.js in the utils folder

In your Next.js project, navigate to the utils folder, which you created earlier, and create a new file named requests.js.

Step 2: Implement Fetch and Post Functions

In the requests.js file, add the necessary functions to fetch and post todos to Supabase. Below is an example of how you can implement these functions:

Fetch Todos

// utils/requests.js
import { supabaseClient } from './supabaseClient';

// Function to fetch todos from Supabase
export const getTodos = async ({ userId, token }) => {
  const supabase = await supabaseClient(token);
  const { data: todos, error } = await supabase
    .from("todos")
    .select("*")
    .eq("user_id", userId);

  if (error) {
    console.error('Error fetching todos:', error.message);
    return [];
  }

  return todos;
};

The getTodos function is an asynchronous function that accepts an object with userId and token properties as parameters. It first awaits the supabaseClient function (imported from './supabaseClient') passing the token as an argument. This function creates and returns the Supabase client. Using the Supabase client, it performs a select query on the "todos" table, filtering the results based on the user_id column that matches the userId parameter.
The result is destructured to extract the data and error properties. If an error occurs during the fetch operation, it logs an error message to the console and returns an empty array ([]).
Otherwise, it returns the fetched todos data.

Post Todos

export const postTodo = async ({ userId, token, e }) => {
  const supabase = await supabaseClient(token);
  const { data, error } = await supabase
    .from('todos')
    .insert({
      user_id: userId,
      todo: e.target[0].value,
      tag: e.target[1].value,
    })
    .select();

  if (error) {
    console.error('Error posting todo:', error.message);
    return null;
  }

  return data;
};

The postTodo function is also an asynchronous function that accepts an object with userId, token, and e properties as parameters.
It awaits the supabaseClient function (imported from './supabaseClient') passing the token as an argument to create the Supabase client.
Using the Supabase client, it performs an insert operation on the "todos" table, inserting a new row with values for user_id, todo, and tag columns obtained from the e parameter (which is expected to contain event-related information).
The result is destructured to extract the data and error properties.
If an error occurs during the insert operation, it logs an error message to the console and returns null.
Otherwise, it returns the inserted data.

Now that you have created the fetchTodos and postTodo functions in the requests.js file, you can use them in your components or pages to interact with your Supabase database. Import the functions where needed and call them to fetch or post todos.

Post Todos Component

To post todos to Supabase, create a create-todo folder inside the app directory, then add a page.jsx file inside it with the following code:

import { useState } from 'react';
import { useRouter } from 'next/router';
import { postTodo } from '../../utils/requests';
import { useAuth } from '@clerk/nextjs';
import Form from '@components/Form';

const CreateToDo = () => {
  const router = useRouter();
  const { userId, getToken } = useAuth();

  const [submitting, setSubmitting] = useState(false);
  const [formData, setFormData] = useState({ todo: '', tag: '' });

  const createTodo = async (e) => {
    e.preventDefault();
    try {
      setSubmitting(true);
      const token = await getToken({ template: 'supabase' });
      const posts = await postTodo({ e, userId, token });
      setFormData(posts);
      if (posts) {
        router.push('/');
      }
    } catch (error) {
      console.error('An error occurred:', error);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Form
      type='Post'
      post={formData}
      setPost={setFormData}
      submitting={submitting}
      handleSubmit={createTodo}
    />
  );
};

export default CreateToDo;

The CreateToDo component is responsible for handling the creation of todos and posting them to the Supabase backend.

It imports the required dependencies, including useState for managing component state, useRouter from Next.js to access the router functionality, postTodo from the utils/requests module to send the todo data to the server, useAuth from @clerk/nextjs for authentication using Clerk, and Form from @components/Form for rendering the form.

The component uses the useState hook to manage the state variables submitting and formData. submitting is used to indicate whether the form is currently being submitted, while formData holds the todo and tag values from the form.

The createTodo function is defined to handle the form submission. It is an asynchronous function to handle the asynchronous tasks such as getting the authentication token and posting the todo data to the server.

When the form is submitted (e.preventDefault() is called), the function sets submitting to true to indicate that the form submission is in progress.

It then uses useAuth to obtain the user's ID and gets the Supabase authentication token using getToken({ template: 'supabase' }).

The postTodo function is called with the necessary data, including the event (e), the user's ID, and the authentication token, to post the todo data to Supabase.
The response from the server is stored in the posts variable, and the state is updated with the response data using setFormData.

If the post was successful (if (posts)), the user is redirected to the homepage using the Next.js router (router.push('/')).

Any errors that occur during the process are caught in the catch block and logged to the console for debugging purposes.

Regardless of success or failure, setSubmitting(false) is called in the finally block to set submitting back to false after the form submission process is completed.

Finally, the Form component is rendered with the appropriate props, including the type, post, setPost, submitting, and handleSubmit. These props are used to pass the necessary information and functions to the Form component to display and handle the form elements.

Retrieve Todos Component

To retrieve the posted todos from Supabase and create a Feed.jsx component to display them, follow these steps:

Import the necessary dependencies:

'use client';
import { useState, useEffect } from 'react';
import  {  getTodos  }  from  '../utils/requests';

Create the Feed component:

const Feed = ({ userId, token }) => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    const fetchTodos = async () => {
      try {
        const todosData = await getTodos({ userId, token });
        setTodos(todosData);
      } catch (error) {
        console.error('Error fetching todos:', error.message);
        setTodos([]);
      }
    };

    fetchTodos();
  }, [userId, token]);

  return (
    <div>
      <h2>Todo Feed</h2>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Feed;

In the Feed component above, the useState hook is used to create a state variable todos and the setTodos function to update it. The initial value of todos is an empty array.

The useEffect hook is used to fetch the todos when the component is mounted. It calls the fetchTodos function asynchronously, which is defined inside the useEffect hook.

Inside the fetchTodos function, the getTodos function is called with the provided userId and token. The returned todos data is stored in the todosData variable and then set as the new value of the todos state using setTodos(todosData).

If an error occurs during the API call, it is caught in the catch block, logged to the console, and the todos state is set to an empty array to clear any previously fetched data.

The rendered JSX in the return statement displays the list of todos. Each todo is mapped to a <li> element with a unique key attribute set to todo.id, and the todo.title is displayed as the content of the list item.

Finally, the Feed component is exported as the default export.

Conclusion

In conclusion, we successfully built a sleek Todo app using Next.js 13, Clerk for Authentication, and Supabase as the database. Clerk ensured secure access, while Supabase handled data storage and real-time updates. The integration of these technologies formed a powerful foundation for modern web apps with enhanced security and user experience. Happy coding!

Your final application should looki like this

Reference

For further guidance and information, refer to the following:

Next.js Documentation: Access the official Next.js documentation at https://nextjs.org/docs for in-depth details about the framework.
Clerk Documentation: Explore Clerk's authentication capabilities and integration guides at https://clerk.com/docs to understand its usage better.
Supabase Documentation: Learn about Supabase's real-time database features and integration options at https://supabase.com/docs.
Simplifying Authentication in Next.js Applications with Clerk: Find detailed steps for setting up Clerk authentication in Next.js apps in the blog post: Dev.to Link.

These references will aid you in building the Todo app with Next.js 13, Clerk, and Supabase effectively. Keep them handy for quick access to valuable information during your development journey.

Simplifying Authentication in Next.js Applications with Clerk

eugene musebe — Fri, 07 Jul 2023 00:09:34 +0000

Introduction

Building secure and user-friendly authentication systems is crucial for modern web applications. As a developer, your goal is to provide a seamless experience for users while keeping their data safe. That's where Clerk comes in. Clerk is a powerful authentication and user management platform designed to simplify authentication in Next.js and Reactjs applications, offering an exceptional developer experience and robust user security.

In this step-by-step guide, we will walk you through using Clerk and Next.js to implement authentication in your web applications. Clerk provides a seamless developer experience and robust user security. Combined with the versatility and efficiency of Next.js, you can easily create secure and user-friendly authentication systems.

By following the steps outlined in this guide, you'll integrate Clerk into your Next.js application and leverage its features to enhance user onboarding, simplify authentication flows, and ensure data security.

Let's get started!

Prerequisites

To follow along with this tutorial, you'll need:

Basic knowledge of React and Next.js.
Node.js and npm (Node Package Manager) installed on your machine.
A Clerk account (you can sign up for free at https://www.clerk.com.

Setting Up Your Next.js Application

First, let's create a new Next.js project by running the following commands in your terminal:



npx create-next-app my-clerk-app
cd my-clerk-app

Configuring a new Clerk application for Authentication

To begin using Clerk, the first step is to create a Clerk account. You can do this by visiting clerk.dev and signing up for a free account. After signing in, you will be prompted to create a new application within your account. This application will serve as your starting point to explore and make use of the various features and capabilities offered by Clerk as highlighted above.

Once you have clicked on Add application after signing in, Give your application a name and select all the 'Social authentication' methods you would like your users to leverage.

Installing Clerk in the Next.js Application

Clerk provides an easy-to-use Nextjs library for integrating with its authentication system. Navigate to your Next.js project's directory and run the following command to install Clerk :



npm install @clerk/nextjs

Configuring Clerk in Your Next.js Application

Create a .env.local file in the root of your Next.js project and include your CLERK_PUBLISHABLE_KEY key and CLERK_SECRET_KEY as environment variables. You can obtain these values from your clerk dashboard under the API keys section as highlighted above.



// clerk environment variables

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="<Your Publishable Key>"
CLERK_SECRET_KEY="<Your Clerk Secret Key>"

Mounting The ClerkProvider

In this step, we will mount the ClerkProvider component to wrap your Next.js application's root layout with the ClerkProvider context. This will allow your application to access Clerk's authentication methods and user data.



// app/layout.jsx
import  {  ClerkProvider  }  from  '@clerk/nextjs';

const Layout = ({ children }) => {
  return (
    <ClerkProvider>
      {/* Your layout code goes here */}
      {children}
    </ClerkProvider>
  );
};

export default Layout;

Safeguarding your Application Routes

Now that Clerk has been installed and mounted in your application, it's time to decide which pages are public and which require authentication. We accomplish this by placing a middleware.js file at the root of the project structure and declaring the public and private routes. In our case, we only want the home page to be public and the rest of the page to be inaccessible until the user logs into the application. This is possible with the following code:



// Protects access from all the other pages except the home page

import { authMiddleware } from '@clerk/nextjs';

export default authMiddleware({
  publicRoutes: ["/"]
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

SignIn and SignUp Components

Clerk provides a selection of ready-made components that allow you to integrate sign-in, sign-up, and other user management features into your Next.js application. To utilize these features, you can use the <SignIn /> and <SignUp /> components alongside Next.js' optional catch-all route.

To implement this, within the "app" folder of your project, create two new directories named "sign-up" and "sign-in". Inside each directory, insert the corresponding code for the sign-up and sign-in functionalities.

Signin



// app/sign-in/pages.js

import { SignIn } from "@clerk/nextjs";

const signIn = () => {
  return (
    <div>
      <SignIn />
    </div>
  );
};

export default signIn;

Signup



// app/sign-up/pages.js

import { SignUp } from "@clerk/nextjs";

const signUp = () => {
  return (
    <div>
      <SignUp />
    </div>
  );
};

export default signUp;

With this in place, When you visit the route http://localhost:3000/sign-in you should be able to load Clerks login page as illustrated below :

Setting Up SignedIn, SignedOut and User Profile

Clerk offers us a set of components that serve specific purposes in managing user authentication within our application. These components include "SignedIn," "SignedOut," and "RedirectToSignIn." By utilizing these components, we can conveniently wrap other components with the necessary authentication functionality. This means that we can easily control the behavior of our application based on whether a user is signed in or signed out. Additionally, we have the ability to trigger a redirection to the sign-in page whenever required. These components greatly enhance our ability to handle user authentication seamlessly within our application.

To finalize the application we need to show the SignInButton, UserButton and SignedOut on the applications Navbar component. Navigate to your applications component and Imports various components and hooks from the '@clerk/nextjs' library as highlited below :



import  {SignedIn, SignedOut,SignInButton,UserButton,}  from  '@clerk/nextjs';

To understand how each component highlighted above works visit Clerks documentation for further reading.

After importing the above components on the navbar component, wrap UserButton component with the SignedIn component. This indicates that the UserButton should only be rendered when a user is signed in.

The SignedOut component, Wraps the the SignInButton component with the SignedOut component. This indicates that the SignInButton should only be rendered when a user is signed out as illustrated in the codeblock below :



const Navbar = () => {
  return (
    <nav>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <SignInButton mode='modal'>
          <button className='rounded border border-gray-400 px-3 py-0.5'>
            Sign in
          </button>
        </SignInButton>
      </SignedOut>
    </nav>
  );
};

export default Navbar;

With this in place you should be able to have a fully authenticated application as highlighted below :

Conclusion

In conclusion, Clerk is the ideal choice for authentication and identity management in Next.js and React applications, thanks to its effortless integration. Clerk's dedicated libraries for Next.js and React, along with its well-documented APIs, make the integration process straightforward and time-saving. Developers can swiftly set up authentication features like login, registration, and user management, leveraging Clerk's user-friendly components and powerful API. Moreover, Clerk seamlessly integrates with various application stacks, ensuring compatibility without significant modifications.

By opting for Clerk, developers can focus on building core application features instead of investing resources in complex authentication systems. Clerk's robust security measures, including multi-factor authentication and passwordless login, enhance application security without additional implementation complexities. With its easy integration, Clerk enables developers to create seamless and secure authentication experiences in Next.js and React applications, ensuring efficient functionality.

Final Codebase

Github Repository : https://github.com/musebe/Nextjs-Clerk
Live Demo : https://nextjs-clerk-nine.vercel.app/

Find a Face in a Crowd With AI

eugene musebe — Fri, 22 Mar 2019 12:18:20 +0000

As technology continues its dominance in our everyday life, facial recognition is becoming more and more common, lending security to systems and gadgets in various sectors, such as health care, payments, criminal identification, and advertising. As a prominent feature of what are called biometric identification systems, facial recognition examines the physical features of people to uniquely distinguish one person from the others. Specifically, this capability takes in data, often an image from an unknown person, analyzes the data, and compares the image with the ones in a database of known people’s faces. The process takes three steps: detection, faceprint creation, and verification or identification.

After verification, the system stores away a faceprint, much like a fingerprint, that contains a set of characteristics, such as the relative locations of the facial features: eyes, eyebrows, nose. When assembled, they uniquely identify a person’s face.

This post describes how to manage and optimize images with Cloudinary after manipulating and uploading them to the Cloudinary storage. To learn how to create, read, and delete images, see the article Get On Board With the Media Express.

Process

Follow the procedures in this section.

Installing the Relevant Software for Face.js

First, install on your machine the software on which Face.js depends for facial recognition.

For Linux and iOS, install the following:

cmake: Type the command sudo apt-get install cmake
** libx11 (XQuartz on OSX) for the dlib GUI:** Type the command sudo apt-get install libpng-dev
libpng for reading images: Type the command sudo apt-get install libpng-dev

Installing and Configuring Cloudinary

For the purpose of reading images from its storage, Cloudinary offers an outstanding Node.js integration library through npm. Install Cloudinary by typing this command:

npm install cloudinary

Add the Node.js classes to your code. Type:

const cloudinary = require(‘cloudinary’)

To enable Cloudinary to work with your account, configure Cloudinary with your cloud name, API key, and API secret, like this:

cloudinary.config({ cloud_name: 'sample', api_key: '874837483274837', api_secret: 'a676b67565c6767a6767d6767f676fe1' });

Setting Up the APIs

To retrieve all your trained images from the Cloudinary server, leverage Cloudinary’s search API. Send the images to the front end with socket.emit(), as follows:

cloudinary.v2.search .expression('folder=face_recognition') .execute().then(result=>{ socket.emit("images", result.resources); });

Next, set up the process of receiving images on the front end with socket.on():

//Wait to receive images socket.on("images", function(images) { for(image of images){ //Add images to HTML DOM } //Add event listener let domImgs = document.querySelectorAll("#imgCont img") for(var i = 0; i < domImgs.length; i++) { domImgs[i].addEventListener('click', function(event){ clickedSrc = event.target.src UploadToNodeServer(event.target.src) }, false); } } });

The code above specifies that, on an image click, Cloudinary saves the image source in a global variable, triggering the UploadToNodeServer function. See below.

function UploadToNodeServer(imgSrc) { socket.emit("imageUpload", { image: false, src: imgSrc, }); } $("#upldbtn").addClass("disabled"); }

The UploadToNodeServer function sends the image source to the node’s back end, as below:

socket.on("imageUpload", function(info) { if(!info.image){ let base64Data; download(info.src, './tmp/uploads/out.png', function(){ if (info.format === "png") console.log("Download success") socket.emit("DownloadSuccess", "true"); //return success }); } });

Afterwards, download the image and send it back to the front end:

`//Function for downloading images

const download = function(uri, filename, callback){
request.head(uri, function(err, res, body){
console.log('content-type:', res.headers['content-type']);
console.log('content-length:', res.headers['content-length']);
request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
});
}`

A click of the Recognize button triggers an AJAX call to the Recognize route, which recognizes the images through the FaceRecognizer class.

Finally, send the response in a new browser window. See the code below.

`router.get('/recognize',function(req,res){
const recognizer = fr.FaceRecognizer();
/*
Load Our Previously Saved Train Data
/
const modelState = require('../model.json');
recognizer.load(modelState);
/
Detect face from image
*/
const image = fr.loadImage('./tmp/uploads/out.png');
const detector = fr.FaceDetector();
const targetSize = 150;
const faceImage = detector.detectFaces(image, targetSize);

/*
Draw rectangle on face
and write a prediction for each face
*/
const faceRects = detector.locateFaces(image).map(mmodRect => mmodRect.rect);
const faces = detector.getFacesFromLocations(image, faceRects, 150);

if(faceRects.length){
const win= new fr.ImageWindow();
win.setImage(image);
faceRects.forEach((rect,i)=>{
win.addOverlay(rect);
const predict = recognizer.predict Best(faces[i],0.69);
win.addOverlay(rect, ${predict.className} (${predict.distance}));
});
// fr.hitEnterToContinue();
}

/*
Send the output for a face to an HTML page
*/
if(faceImage.length){
const predictions=recognizer.predict(faceImage[0]);
res.send(predictions);
}
else{
res.status(400).json({msg:'Could Not Detect Face, Please try another
picture'});
}
});`

Conclusion

Presently, major tech companies, such as Apple, are keenly interested in and adopting the facial-recognition technology. AI startups, too, are becoming unicorns. Without a doubt, facial recognition will play a more and more prominent role in society in the near future. Concerns about privacy notwithstanding, facial recognition makes our streets, homes, banks, and shops safer—and more efficient, too.

For details of the facial-recognition project described in this post, see the GitHub code. Contributions and suggestions are welcome.

Get On Board With the Media Express

eugene musebe — Tue, 12 Mar 2019 20:08:20 +0000

In today’s online world, the delivery speed of your eCommerce web and mobile apps is a paramount factor in user experience. If your customers become frustrated by a lengthy load time for your website, they might stop visiting it, putting your online presence at risk. The fact is, people judge your brand by how well they can interact with your web and mobile apps before contacting you in person.

For web developers, managing digital assets, such as videos, photos, music, and other multimedia, is a must-do. Poor handling of that task might lead to slow performance of your apps, causing a dismal user experience.

No worries,Cloudinary is here to the rescue.

Cloudinary is a cloud-based platform for managing images and videos, enabling businesses and developers to focus on their specialties. In fact, management of digital assets is Cloudinary’s core business.

This article steps you through the process of developing a simple, web-based app that creates, reads, and deletes media from the Cloudinary servers.

Installing NPM

To start, download the most stable release of the Node.js binaries from https://nodejs.org.Afterwards, install them on your machine by following the procedure on the page that pertains to your platform.

To confirm the installation, type these two commands:

node -v
npm -v

The output displays the version numbers of your Node.js and the Node Package Manager (NPM), a tool for installing, uninstalling, and maintaining package modules for apps.

Initializing a New App

A basic Node app contains a .js file and a package.json file, which does the following :

Specifies the packages on which your project depends,
Lists the versions of a package that your project can use according to the semantic versioningrules.
Makes your build reproducible, hence easier to share with other developers.

To generate a package.json file for your app, navigate to your project folder in a terminal or, for Windows users, in Git Bash, and type the following command:

npm init -y

Running the above command without the flag -y generates questions that prompt for answers from you, which would clearly describe the app and its dependencies.

Installing the Required Dependencies

Run this command to install the required dependencies:
npm install express body-parser multer express-handlebars moment dotenv cloudinary --save

Below are the dependencies:

express: A web-app framework for Node.js.
body-parser: A middleware that handles post requests in express.
multer: The Node.js middleware for handling multipart FormData.
express-handlebars: A Handlebars view-engine for express.
moment: A lightweight JavaScript date-library for parsing, validating, manipulating, and formatting dates.
dotenv: A module that loads environment variables from a .env file into the process.env property.
cloudinary: A Node.js wrapper that enables you to communicate with the Cloudinary servers.
Once the dependency packages are in place, edit the package.json file to read like this:

As specified in the file, the entry point to your app is the server.js file. That is where you will document most of the logic on which the app depends.

Starting the Server

Next, start the server by adding the following code to the server.js file:

const express = require("express"); const app = express(); app.get("/", (req, res) => res.send("Hello Cloudy")); const PORT = process.env.PORT || 5000; app.listen(PORT, () => { console.log(Server running on ${PORT}); });

Aftwards, start your app by running this command:
node server.js

Now go to localhost:5000 on your browser to verify that the string Hello Cloudy is displayed.

Building the Project Structure

express-handlebars is your default templating engine on the front end. To make use of it, do the following:

const exphbs = require('express-handlebars'); app.engine('handlebars', exphbs({defaultLayout: 'main'})); app.set('view engine', 'handlebars');

2.Enclose all the front-end files in a folder called views.

In the views folder, create another folder and name it layouts, in which the main.handlebars file, which contains your app’s front-end structure, resides.

Your app’s project structure now looks like this:

Adding Content to the `main.js` and `index.handlebars` Files

Add the following code to the main.js file:

With the Moustache symbol {{body}}, you can seamlessly invoke other pages into the main body.

Next, go to the root of the views folder, create an index.handlebars file, and then add a media-upload form with the following code to the file:

Afterwards, run the app on localhost:5000 on the browser and verify that the form below is displayed:

Configuring Multer

Recall that you installed Multer earlier. That’s a Node.js middleware for uploading or handling multipart FormData.

To configure Multer:

In the root of your app, create a folder called handlers for storing the configurations for Multer and other packages.
In the handlers folder, create a file called multer.js with this configuration code:

const multer = require("multer");module.exports = multer({ storage: multer.diskStorage({}), fileFilter: (req, file, cb) => { if (!file.mimetype.match(/jpe|jpeg|png|gif$i/)) { cb(new Error("File is not supported"), false); return; }cb(null, true); } });

Next, export multer.js to the main server.js file by adding this codeline to server.js:

const upload = require("./handlers/multer");

Then edit the upload route to read like this:

app.post("/uploads", upload.single("image"), (req, res) => {res.send(req.file);});

The above steps ensure that when you upload a media file, you can capture the content of the request on the /uploads route, as shown here:

Uploading Media to Cloudinary

The project is now ready for file uploads to Cloudinary. Perform the steps below.

Initializing the Cloudinary SDK

First, initialize the Cloudinary SDK into the project by adding this codeline to the main server.js file:

const cloudinary = require("cloudinary");

Storing and Securing Cloudinary API Keys

To use Cloudinary, you must store its API key, cloud name, and cloud secret in your app. Those keys identify the app or user who’s accessing the Cloudinary servers.
Secure the keys with the dotenv package. Even though you can store and use keys without packages, the packages are of great help in managing the keys.

To prepare dotenv for use:

Add these two lines to your server.js file:

require("dotenv").config(); require("./handlers/cloudinary");

The second codeline above calls for a cloudinary.js file in the handlers folder.
2.Create a cloudinary.js file in the handlers folder with the following content:

const cloudinary = require("cloudinary"); cloudinary.config({ cloud_name: process.env.CLOUD_NAME, api_key: process.env.API_ID, api_secret: process.env.API_SECRET });

With this file, the app can locate your server’s access keys that are stored in the .env file.

3.Go to the root of the app and create the .env file.

If your .env file contains confidential values, such as keys, secrets, and passwords, place it in the .gitignore folder to prevent it from being committed it to the GitHub repository.

Afterwards, declare your credentials in the .env file by adding the following code to it:

CLOUD_NAME= your_cloud_name API_ID= id API_SECRET= secret

To get the values for those three credentials, first register for a Cloudinary account. Once you are logged in, you’ll see the credential values on your Dashboard. Here’s an example:

Configuring the `/Uploads` Route

For details on how to perform create, read, update, and delete (CRUD) operations to and from the Cloudinary servers, see the related documentation.

To enable file uploads, configure the post “/uploads” route, like this:

`app.post("/uploads", upload.single("image"), async (req, res) => {
const result = await cloudinary.v2.uploader.upload(req.file.path);
res.send(result);

});`

With that configuration, Cloudinary would store the media files that you submit and return to you an object that spells out the properties of those files. See the example below.

Setting Up the Cloudinary Upload Widget

In case you worry that uploading media to the Cloudinary servers might take up an inordinate amount of time, worry no more. Cloudinary’s -upload widget renders file uploads a fast process. For details of the widget, see the related documentation.

Follow these steps to set up the upload widget:

Add a button to your form with the value of the ID (id) specified as upload_widget_opener, like this:

<input value="Upload with Cloudinary Widget" id="upload_widget_opener" class="btn btn-primary btn-block">

Add this script to the main.handlebars file to load the widget:

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript"> </script>

Set up a handler to listen to a click event of the button element on the web page and then call the widget's open method to display the initialized widget. Below is the sample code.

Finally, change your upload presets from signed to unsigned. To do so, choose Settings > Upload Tab > Upload Presets and make the change in the dialog box that is displayed.

You can now upload media with Cloudinary’s upload widget.

Retrieving Stored Media From Cloudinary in JSON Format

In the server.js file, define a GET “/api/files” endpoint to call all the files you have stored in Cloudinary. Add the following code:

app.get("/api/files", async (req, res) => { const images = await cloudinary.v2.api.resources({ type: "upload", prefix: "image" }); return res.json(images); });

Afterwards, go to localhost:5000/api/ files on your browser for a display of all your stored files in Cloudinary.

Displaying Your Stored Files on the Front End

To display your stored files on the front end, send a GET request to the Cloudinary storage, which will then return an object with all the stored data for conversion into a format that suits the app. For this app, target the secure_url and created_at fields.

Create another endpoint in your server.js file with the following format:

app.get("/files", async (req, res) => { const images = await cloudinary.v2.api.resources({ type: "upload", prefix: "image" }); // Check if files if (!images || images.length === 0) { return res.status(404).json({ err: "No files exist" }); } // Files exist res.render("files", { images: images }); });

You can now render all the media on the /files route on the browser. However, for that to happen, you must first create the endpoint in the views folder and add logic to it to loop and format the responses you receive.

In the views folder, create a files.handlebars file with the following code:

Recall that you’re targeting the url and created_at endpoints from the server. The code above displays all your media by means of bootstrap cards after looping through the media with the Handlebars’ looping technique.

You’ll now see the following response when you access the route:

Deleting Files

You can easily delete a media file by passing its ID (id) in a request, as shown in this example:

app.delete("/files", (req, res) => { let id = req.body.id; cloudinary.v2.api.delete_resources([id], function(error, result) {console.log(result);}); });

By setting cloudinary.v2.api.delete_resource(), you can capture the ID of the selected media file and delete that file from Cloudinary.

Earlier, on the bootstrap card, you added a button to initiate the delete operation when clicked. Complete that setup by adding the following script under the bootstrap card on the files.handlebars route:

<script> deleteImage = () => { const imageClickedID = event.target.id fetch(/files, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: imageClickedID }) }) .then(location.reload()) .catch(err => console.log(err)) } </script>

There! Now you can delete the selected file from Cloudinary by clicking the Delete button.

Formatting the Date With Moment.Js

The only remaining task is to set up the date and time in a readable format. Do that with a package called moment, a lightweight JavaScript date-library for parsing, validating, manipulating, and formatting dates.

You’ve already pulled the package to the project. Now do the following:
Initialize moment into the project with this codeline:

const moment = require("moment");

Call the moment variable for the date-format values by navigating to the line in which you declared your default layout and adding a helper` function:

helpers: { renderDateFormat: function(time) { return moment(time).format("MMMM Do YYYY");} }

Open the files.handlebar file and add renderDateFormat within the Handlebars created_at` helper. Your helper then reads like this:

{{renderDateFormat created_at}}

Your app is now all set, resembling the one hosted on Heroku.

Checking Out the References

Managing digital media with Express, Multer, and Cloudinary is a painless, seamless, and simple process. In particular, Cloudinary’s robust features greatly accelerate software development that involves digital media. The Cloudinary documentation contains all the details.
Additionally, feel free to clone and modify the source code on GitHub. Have fun!

DEV Community: eugene musebe

Meet the Cloudinary Creators Community: A New Space for Developers Building with Media

The Vision: ‘From Cloud to Crowd’

Phase 1: Education

Joining the Community: Two Pathways

The Partner Pathway

The Individual Pathway

Phase 2: Activation

Discord: Our Digital Headquarters

Selectivity and Waitlist Management

Membership Benefits and Rewards

The Engagement Path (12 Points/Year)

Community Life and Activities

Professionalism and Governance

Streamlining Your Next.js Projects with Supabase and Drizzle ORM

Step 1: Setting Up Your Next.js Environment

Configuring Drizzle ORM and Environment Variables

Setting Up Your Supabase Project

Configure Environment Variables

Drizzle Configuration Setup

Defining the Database Schema

Setting Up Database Connection and Utility Functions

Enhancing Database Management with Drizzle Scripts

Generating Migration Files for PostgreSQL with Drizzle

Setting Up the Migration Script

Executing the Migration Script

Populating the Products Table with Seed Data

Wrapping Up

Reference

ClerkDocs for VSCode: Essential Snippets for Clerk Components

Introduction

Why ClerkDocs is Essential

Key Features

Installation Guide

Snippets Overview

Your Input Matters!

Open-Source Contributions

Links and Resources

Implementing Role-Based Access Control in Next.js App Router using Clerk Organizations

Introduction

Prerequisites

Github Repository and Live Demo

Setting up Clerk and Clerk Organizations

Creating Clerk Organizations

Adding members to an Organization

Next.js Setup

Integrating Clerk with Next.js

Application Layout

Navbar

Sign in and sign up Components

Sign In Component:

Sign Up Component:

Protecting your application routes

Hero Component

Navbar links Conditional Rendering

Ensuring Role-Based Access Control for the Admin Dashboard Page

Conclusion

Refference

Building a Todo App with Next.js 13, Clerk, and Supabase.

Prerequisites

Github Repository

Getting Started

Supabase Setup

Step 1: Sign Up for a Supabase Account

Step 2: Create a New Project

Step 3: Set Up Your Database

Configure RLS (Row Level Security) for thetodos table

Installing Supabase

Centralizing Supabase Client

Performing Requests to Fetch and Post Todos from Supabase: Creating requests.js in the utils Folder

Fetch Todos

Post Todos

Post Todos Component

Retrieve Todos Component

Conclusion

Reference

Simplifying Authentication in Next.js Applications with Clerk

Introduction

Prerequisites

Setting Up Your Next.js Application

Configure RLS (Row Level Security) for the`todos` table

Performing Requests to Fetch and Post Todos from Supabase: Creating `requests.js` in the `utils` Folder

Adding Content to the `main.js` and `index.handlebars` Files

Configuring the `/Uploads` Route