Building Secure Private Routes with UI Now

UI Now makes it simple to create private routes like user dashboards, account pages, and other secure sections of your SaaS application. By leveraging built-in authentication and seamless routing, you can ensure users only access what they’re authorized to.

Key Features:

1. Effortless Route Protection:
   The layout.js file in the /dashboard directory ensures all pages and subpages under /dashboard are private. If a user isn’t authenticated, they’ll automatically be redirected to the login page.

2. Secure API Calls:
   For making protected API requests, UI Now provides a straightforward approach. Follow the tutorial to handle authentication with ease and maintain data security.

3. Pre-Rendered Private Data:
   With server components, you can fetch user-specific data (like profiles or dashboards) securely before rendering the page. This ensures sensitive data never leaves the server unnecessarily.

Example: Creating a User Dashboard

Here’s an example of a private user dashboard that retrieves data securely:

File: /app/dashboard/page.js

javascriptCopy codeimport { createClient } from "@/libs/supabase/server";

export const dynamic = "force-dynamic";

// This is a private page protected by the layout.js component.
// Only authenticated users will be able to access this page.
export default async function Dashboard() {
  const supabase = createClient();
  const { data } = await supabase.from("todos").select();

  return (
    <main className="min-h-screen p-8 pb-24">
      <section className="max-w-xl mx-auto space-y-8">
        <h1 className="text-3xl md:text-4xl font-extrabold">Private Page</h1>

How It Works:

1. Authentication Redirection:
   The layout.js file checks if the user is authenticated. If not, they’re redirected to the login page, ensuring no unauthorized access.

2. Server Components for Data Security:
   By using server components, you can fetch data like user profiles, tasks, or analytics directly from the database before rendering. This approach keeps sensitive data safe and reduces client-side overhead.

3. Example Table (Optional):
   To see the above example in action, create an SQL table called todos in your database with at least one row.

Why Use UI Now for Private Routes?

• Seamless Integration: Built-in tools for authentication and routing make creating private pages straightforward.

• Enhanced Security: Use server-side components to fetch and display data without exposing sensitive information.

• Scalable Design: Easily expand private routes to include dashboards, account settings, and more.

With UI Now, securing your SaaS application is intuitive and efficient. Ready to create your private user dashboards? Start building today.