Getting started with Clerk

Getting started with clerk Phase 1

What's Clerk?

Clerk authentication is a platform that helps developers create secure authentication systems for their applications. It offers a variety of authentication methods, including passwords, social media sign-on, and multi-factor authentication.

It's Benefits

Simplifies the authentication process for developers
Provides a seamless user experience
Ensures user data security
Reduces the need to build custom login and sign-up screens

Getting started

Set up your Clerk account

Before you can start integrating Clerk into your application, you need to create a Clerk account and set up a new application in the Clerk Dashboard. This guide will walk you through those steps.

Sign into Clerk
Create a Clerk application
Select your identifiers and social providers
Integrate Clerk into your application

Integrating Clerk into our Next.Js Project

Install @clerk/nextjs
Set your Clerk API keys Create your .env.local file. These keys can always be retrieved from the API Keys page of your Clerk Dashboard.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_cmVhZHktaG91bmQtNjIuY2xlcmsuYWNjb3VudHMuZGV2JA
CLERK_SECRET_KEY=sk_test_gSjYiO5x9yd5qNaMGrSttDFubU3ai77jD3yaHqSjoq

Add your clerkMiddleware() to your app clerkMiddleware() grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users.
Add and Clerk components to your app
Successfully Create your first user

Getting started with clerk Phase 2

This phase focuses on implementing user authentication using Clerk.js within the Next.js application.

Implementation Details:

Authentication Components:
- Integrated the SignIn component from @clerk/nextjs to provide a user login experience.
- Utilized the useAuth hook to manage user authentication state within the application.
Header Component:
- Created a client-side rendered Header component for optimal performance.
- Implemented conditional rendering of navigation links based on user authentication status:
  - When not signed in: Displays "Sign In" and "Sign Up" links.
  - When signed in: Displays a "Profile" link and the UserButton for user management (sign in, sign out, profile).
Home Page:
- Added initial content to the Home page, welcoming users and providing a brief overview of the application.

Testing:

Thoroughly tested the authentication flow, including successful login, logout, and navigation to different pages based on authentication status.

This phase establishes a solid foundation for user authentication, enabling secure and personalized user experiences within the application.

Output:

A functional user authentication system integrated into the Next.js application.
A well-structured and reusable Header component that adapts to user authentication state.
A basic Home page with initial content.

Getting started with clerk operation Phase 3

This phase focuses on implementing user creating user profile and styling which will enhance the user experience.

Implementing User Profile:
- The UserProfile component from @clerk/nextjs displays the essential user information. import { UserProfile } from '@clerk/nextjs';
```
const ProfilePage = () => {
return (
<div>
  <UserProfile />
</div>
);
}
```

Applying Custom Styling:

The neobrutalism theme from @clerk/themes enhances the application's visual appeal.
Custom fonts (Geist Sans and Geist Mono) have been utilized for improved typography.

Applying the neobrutalism Theme:

import { ClerkProvider } from "@clerk/nextjs";
import { neobrutalism } from "@clerk/themes";

export default function RootLayout({ children }) {
return (
<ClerkProvider appearance={{ baseTheme: neobrutalism }}> 
  {/* ... rest of the layout ... */}
</ClerkProvider>
);
}

Layout Enhancements:
- The overall layout and structure of the application.

Output:

Functional User Profile: Users can now view their basic profile information within the application.
Enhanced Visual Appeal: The application now features the neobrutalism theme, providing a more visually engaging user experience.
Improved Typography: Custom fonts enhance readability and contribute to a more polished look.

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Lawani-EJ/madara