Fatuma Abdullahi - freeCodeCamp.org

How to Build Secure SSR Authentication with Supabase, Astro, and Cloudflare Turnstile

Fatuma Abdullahi — Fri, 20 Jun 2025 17:02:12 +0000

In this guide, you'll build a full server-side rendered (SSR) authentication system using Astro, Supabase, and Cloudflare Turnstile to protect against bots.

By the end, you'll have a fully functional authentication system with Astro actions, magic link authentication using Supabase, bot protection via Cloudflare Turnstile, protected routes and middleware, and secure session management.

Prerequisites
Understanding the Technologies
Understanding SSR Authentication
- SSR vs. SPA Authentication
Why Protect Auth Forms?
Part 1: How to Set Up the Backend
- Set Up Supabase Backend
- Set Up Cloudflare Turnstile
Part 2: How to Set Up the Frontend
Part 3: How to Set Up Supabase SSR
- Create the Supabase Client
- Create Middleware for Route Protection
Part 4: How to Build the User Interface
Part 5: How to Set Up Astro Actions
- Create the Authentication Actions
- Create the Code Exchange API Route
Part 6: How to Test Your Application
Notes and Additional Resources
- Useful Documentation
- Complete Code Repository

Prerequisites

This tutorial assumes you are familiar with:

Web development frameworks
Basic authentication flows
Basic Backend-as-a-Service (BaaS) concepts

Understanding the Technologies

What is Astro?

Astro is a UI-agnostic web framework that renders server-first by default. It can be used with any UI framework, including Astro client components.

What are Astro Actions?

Astro actions allow you to write server-side functions that can be called without explicitly setting up API routes. They provide many useful utilities that simplify the process of running server logic and can be called from both client and server environments.

What is Supabase?

Supabase is an open-source Backend-as-a-Service that builds upon Postgres. It provides key features such as authentication, real-time capabilities, edge functions, storage, and more. Supabase offers both a hosted version for easy scaling and a self-hostable version for full control.

What is Cloudflare Turnstile?

Turnstile is Cloudflare's replacement for CAPTCHAs, which are visual puzzles used to differentiate between genuine users and bots. Unlike traditional CAPTCHAs, which are visually clunky, annoying, and sometimes difficult to solve, Turnstile detects malicious activity without requiring users to solve puzzles, while providing a better user experience.

Understanding SSR Authentication

Server-side rendered (SSR) auth refers to handling authentication on the server using a cookie-based authentication method.

The flow works as follows:

The server creates a session and stores a session ID in a cookie sent to the client
The browser receives the cookie and automatically includes it in future requests
The server uses the cookie to determine if the user is authenticated

Since browsers cannot modify HTTP-only cookies and servers cannot access local storage, SSR authentication requires careful management to prevent security risks such as session hijacking and stale sessions.

SSR vs. SPA Authentication

Single-Page Applications (SPAs), like traditional React apps, handle authentication on the client side because they don't have direct access to a server. SPAs typically use JWTs stored in local storage, cookies, or session storage, sending these tokens in HTTP headers when communicating with servers.

Why Protect Auth Forms?

Authentication protects sensitive resources from unauthorized access, making auth forms primary targets for bots and malicious actors. Taking extra precautions is important for maintaining security.

Part 1: How to Set Up the Backend

Set Up Supabase Backend

First, you'll need a Supabase account. Create a project, then:

Go to the Authentication tab in the sidebar
Click the Sign In / Up tab under Configuration
Enable user sign-ups
Scroll down to Auth Providers and enable email (disable email confirmation for this tutorial)

Set Up Cloudflare Turnstile

Log in or register for a Cloudflare account
Click the Turnstile tab in the sidebar
Click the "Add widget" button
Name your widget and add "localhost" as the hostname
Leave all other settings as default, and create the widget

After creating the widget, copy the secret key and add it to your Supabase dashboard:

Go back to Supabase Authentication settings
Navigate to the Auth Protection tab under Configuration
Turn on Captcha protection
Choose Cloudflare as the provider
Paste your secret key

Part 2: How to Set Up the Frontend

Create the Astro Project

Next, you will need to create an Astro project. Open your preferred IDE or Text editor’s integrated terminal and run the following command to scaffold an Astro project in a folder named “ssr-auth.” Feel free to use any name you like.

npm create astro@latest ssr-auth

Follow the provided prompts and choose a basic template to start with. When it’s done, change into the folder, then run npm install to install dependencies, followed by npm run dev to start the server, and your site will be available at localhost:4321.

Configure Astro for SSR

Set Astro to run in SSR mode by adding output: "server", to the defineConfig function found in the astro.config.mjs file at the root of the folder.

Next, add an adapter to create a server runtime. For this, use the Node.js adapter by running this command in a terminal: npx astro add node. This will add it and automatically make all relevant changes.

Finally, add Tailwind for styling. Run this command in a terminal window: npx astro add tailwind. Follow the prompts, and it will make any changes necessary.

At this stage, your astro.config.mjs should look like this:

// @ts-check
import { defineConfig } from "astro/config";
import node from "@astrojs/node";
import tailwindcss from "@tailwindcss/vite";

// https://astro.build/config
export default defineConfig({
  output: "server",
  adapter: node({
    mode: "standalone",
  }),
  vite: {
    plugins: [tailwindcss()],
  },
});

Install Supabase Dependencies

You can do this by running the following command:

npm install @supabase/supabase-js @supabase/ssr

Configure Environment Variables

Create a .env file in the project root and add the following. Remember to replace with your actual credentials:

SUPABASE_URL=
SUPABASE_ANON_KEY=
TURNSTILE_SITE_KEY=

You can get the Supabase values from the dashboard:

💡Note: In Astro, environment variables accessed on the client side must be prefixed with 'PUBLIC'. But since we're using Astro actions that run on the server, the prefix is not required.

Part 3: How to Set Up Supabase SSR

Create the Supabase Client

Create src/lib/supabase.ts:


import { createServerClient, parseCookieHeader } from "@supabase/ssr";
import type { AstroCookies } from "astro";

export function createClient({
    request,
    cookies,
}: {
    request: Request;
    cookies: AstroCookies;
}) {
    const cookieHeader = request.headers.get("Cookie") || "";

    return createServerClient(
        import.meta.env.SUPABASE_URL,
        import.meta.env.SUPABASE_ANON_KEY,
        {
            cookies: {
                getAll() {
                    const cookies = parseCookieHeader(cookieHeader);
                    return cookies.map(({ name, value }) => ({
                        name,
                        value: value ?? "",
                    }));
                },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value, options }) =>
                        cookies.set(name, value, options)
                    );
                },
            },
        }
    );
}

This sets up Supabase to handle cookies in a server-rendered application and exports a function that takes the request and cookies object as input. The function is set up like this because Astro has three ways to access request and cookie information:

Through Astro’s global object, which is only available on Astro pages.
Through AstroAPIContext object, which is only available in Astro actions.
Through APIContext which is a subset of the global object and is available through API routes and middleware.

So the createClient function accepts the request and cookies objects separately to make it flexible and applicable in the various contexts in which it may be used.

Create Middleware for Route Protection

Next, create a middleware.ts file in the src folder and paste this into it:

import { defineMiddleware } from "astro:middleware";
import { createClient } from "./lib/supabase";

export const onRequest = defineMiddleware(async (context, next) => {
    const { pathname } = context.url;

    console.log("Middleware executing for path:", pathname);

    const supabase = createClient({
        request: context.request,
        cookies: context.cookies,
    });

    if (pathname === "/protected") {
        console.log("Checking auth for protected route");

        const { data } = await supabase.auth.getUser();

        // If no user, redirect to index
        if (!data.user) {
            return context.redirect("/");
        }
    }

    return next();
});

This middleware checks for an active user when accessing the protected route and redirects unauthenticated users to the index page.

Part 4: How to Build the User Interface

Update the Layout

First, update src/layouts/Layout.astro to include the Turnstile script. Add this just above the closing tag:

Replace the contents of src/pages/index.astro:

---
import Layout from "../layouts/Layout.astro";
import { createClient } from "../lib/supabase";
import "../styles/global.css";

const supabase = createClient({
    request: Astro.request,
    cookies: Astro.cookies,
});

const { data } = await supabase.auth.getUser();

if (data.user) {
    return Astro.redirect("/protected");
}

const apiKey = import.meta.env.TURNSTILE_SITE_KEY;
---


    class="flex flex-col items-center justify-center m-30">
        class="text-4xl text-left font-bold mb-12">Sign In to Your Account
        "signin-form" class="flex flex-col gap-2 w-1/2">
            for="email" class="">Enter your email
            type="email"
                name="email"
                id="email"
                placeholder="youremail@example.com"
                class="border border-gray-500 rounded-md p-2"
                required
            />
            class="cf-turnstile" data-sitekey={apiKey}>

Here, the frontmatter creates a Supabase server client and then uses it to check if we have an active user. It redirects based on this information. This works because the front matter runs on the server side, and the project is set to server output.

The template displays a simple form with an email input. To complete it, add this below the closing tag:

This adds some vanilla JavaScript that calls the SignIn Upon form submission. This action provides user feedback through alerts and manages the button’s text and disabled state. This effectively adds client-side interactivity to the page.

Create the Protected Page

Create src/pages/protected.astro:

---
import Layout from "../layouts/Layout.astro";
import { createClient } from "../lib/supabase";
import "../styles/global.css";

const supabase = createClient({
    request: Astro.request,
    cookies: Astro.cookies,
});

const { data } = await supabase.auth.getUser();
---


    class="flex flex-col items-center justify-center m-30">
        class="text-4xl text-left font-bold mb-12">You are logged in!
        class="mb-6">Your user Id: {data.user?.id}

This page retrieves the user data server-side in the front matter and displays it in the template, along with a sign-out button.

The JavaScript in the script tags handle calling the sign-out action, user feedback, and button state, as in the index.astro page.

Part 5: How to Set Up Astro Actions

Create the Authentication Actions

Finally, add an actions folder in the src folder and create an index.ts file to hold our logic. Paste the following into it:

import { defineAction, type ActionAPIContext } from "astro:actions";
import { z } from "astro:schema";
import { createClient } from "../lib/supabase";

const emailSignUp = async (
    {
        email,
        captchaToken,
    }: {
        email: string;
        captchaToken: string;
    },
    context: ActionAPIContext
) => {
    console.log("Sign up action");
    try {
        const supabase = createClient({
            request: context.request,
            cookies: context.cookies,
        });

        const { data, error } = await supabase.auth.signInWithOtp({
            email,
            options: {
                captchaToken,
                emailRedirectTo: "http://localhost:4321/api/exchange",
            },
        });

        if (error) {
            console.error("Sign up error", error);
            return {
                success: false,
                message: error.message,
            };
        } else {
            console.log("Sign up success", data);
            return {
                success: true,
                message: "Successfully logged in",
            };
        }
    } catch (err) {
        console.error("SignUp action other error", err);
        return {
            success: false,
            message: "Unexpected error",
        };
    }
};

export const server = {
    signIn: defineAction({
        accept: "form",
        input: z.object({
            email: z.string().email(),
            captchaToken: z.string(),
        }),
        handler: async (input, context) => {
            return emailSignUp(input, context);
        },
    }),
    signOut: defineAction({
        handler: async (_, context) => {
            const supabase = createClient({
                request: context.request,
                cookies: context.cookies,
            });
            const { error } = await supabase.auth.signOut();
            if (error) {
                console.error("Sign out error", error);
                return {
                    success: false,
                    message: error.message,
                };
            }
            return {
                success: true,
                message: "Successfully signed out",
            };
        },
    }),
};

This action handles both sign-in and sign-out methods. A Supabase server instance is created during the sign-in method, and the magic link method is used for sign-in. It passes a redirect URL, which we have yet to create, and handles any errors that may occur.

It also passes the token verification, allowing Supabase to perform verification on our behalf, eliminating the need to call Cloudflare’s verify APIs directly.

The sign-out method calls Supabase’s sign-out method and handles any potential errors.

The redirect URL refers to an API route that exchanges the code from the email Supabase sends for a session that Supabase handles.

Create the Code Exchange API Route

Create src/pages/api/exchange.ts:

import type { APIRoute } from "astro";
import { createClient } from "../../lib/supabase";

export const GET: APIRoute = async ({ request, cookies, redirect }) => {
    const url = new URL(request.url);
    const code = url.searchParams.get("code");

    if (!code) {
        return redirect("/");
    }

    const supabase = createClient({ request, cookies });
    const { error } = await supabase.auth.exchangeCodeForSession(code);

    if (error) {
        console.error("Error exchanging code for session:", error);
        return redirect("/404");
    }

    return redirect("/protected");
};

This grabs the code from the URL in the magic link sent, creates a server client, and calls the exchangeCodeForSession method with the code. It handles any error by redirecting to Astro’s built-in not-found page.

Otherwise, it will redirect to the protected page as Supabase handles the session implementation details.

Part 6: How to Test Your Application

Start your development server: npm run dev

Visit the provided localhost URL. You should see the sign-in page with the Turnstile widget:

If you try to access the /protected page, it will redirect you back to this view until you sign in. Now, sign in, and you should get an email with a link that will redirect you to the /protected page. This is what you should see:

And with that, you've successfully built a comprehensive auth system that leverages Astro actions, Supabase auth, and Cloudflare Turnstile's bot protection. This setup provides a secure, user-friendly authentication experience while protecting your application from malicious actors.

Notes and Additional Resources

Useful Documentation

Complete Code Repository

The complete code for this project is available on GitHub:

How to Move Figma Components to Penpot

Fatuma Abdullahi — Wed, 26 Mar 2025 23:20:33 +0000

Penpot is an open-source design tool for creating complete design systems. It is free, self-hostable, and allows multiple projects. Penpot supports reusable components and assets and allows files and libraries to be shared across projects. Penpot files can be exported in various formats to enhance collaboration.

Penpot designs directly translate to code that meets web standards, facilitating collaboration and hand-off between designers and developers.

This tutorial will walk you through recreating or moving existing Figma components to Penpot. It will include a rundown of the Penpot tool and how to use it, a brief comparison of the two tools, and important resources.

How to Recreate Existing Figma Files in Penpot
Understanding the Penpot User Interface
Understanding Penpot Layouts
How to Create and Use Penpot Components
How to Create Reusable Assets in Penpot
How to Add and Use Icons in Penpot
Figma Vs. Penpot - My experience
Resources and Notes

How to Recreate Existing Figma Files in Penpot

There are two ways to move or recreate existing Codex components from Figma to Penpot: By using the community-supported migration tool or by manually recreating the components and files.

Using the Community-Supported Migration Plugin

You can use this plugin to move your Figma designs to Penpot. It is a straightforward way to migrate from Figma, especially if you have many components.

To do so, add it as a Figma plugin and find the option in the context menu. Then, click on the "Penpot Exporter" option to activate the plugin. The plugin will then create a zip file for your component and download it.

Over in Penpot, in your Projects dashboard, click on the three dots context menu and select "Import Penpot files" to open a file picker window. Click on the zip file downloaded from Figma, and Penpot will create a new project with the same name as the zip file. This new project will contain your Figma component translated to the Penpot environment.

Looking at the new component, you'll notice that the migration plugin correctly picks up any child components and typography variables while keeping things fairly organized. But it does not pick up color variables.

Manually Recreating Figma components

Another way to move Figma components to Penpot is to recreate them manually. While this option is more tedious than the previous one, it gives you fine-tuned control over how the component looks, how the files are organized, and how the assets are carried over.

It is an excellent excuse to spruce up the existing components, especially if there are few. It is also a good exercise for first-time users to grasp Penpot.

To effectively move components using this method, you will need to understand how Penpot works. The following concepts will help make this process more efficient.

Understanding the Penpot User Interface

Penpot's UI is pretty similar to Figma's, except that Penpot defaults to Dark Mode. You have your controls on the right and your files, assets, and layers on the left, with a canvas in the middle.

Both have a toolbar that enables you to interact with the canvas. The toolbars have slightly different icons and names but have the same functionality. Notably, in Penpot, the Frame tool is called Board.

Penpot supports most of Figma's features, except for Design Tokens, which will be added soon.

Understanding Penpot Layouts

Penpot supports Flex and Grid layouts. These layouts allow you to position items precisely and simplify creating fluid designs. For those familiar with CSS Grid and Flex, they work in the same way.

Flex layout allows you to organize the elements within a parent container, like a board or an encompassing shape, across one dimension, width, or height. It enables you to determine the spacing and positioning of the child elements via visual controls with labels on the right side panel.

Grid layouts allow the same controls as Flex layouts but with the added flexibility of simultaneously spanning a child element across both dimensions. This makes Grid layouts quite helpful in creating complex and nuanced designs.

How to Create and Use Penpot Components

Creating a component in Penpot is relatively straightforward. You select the elements that will make up the component, then right-click and click "Create component," turning your selection into a component.

Your new component will be available under the "Assets" tab on the left side panel. To use, drag it onto the canvas.

You can also create copies of the component. By default, the copies are tied to the main component, and any changes to the main will be reflected in all copies. You can override this by detaching the copies from the context menu.

How to Create Reusable Assets in Penpot

Penpot has three asset types: Typography, Colors, and Components, with Penpot design tokens coming very soon. Typography refers to information on font types and weights that make up text styles. Colors enable you to create and sort your repeated colors. Components refer to reusable design pieces and, in this context, include graphical items like icons and images.

To create a color or typography asset, click the "Assets" tab and the plus icon on the relevant accordion item. For color, it will open a color picker. Paste the hex value in the appropriate place, then save it. The color will show up in the accordion drop-down. You can click on it to give it a semantic name if desired.

For typography, click on the plus icon at the relevant accordion. This will open a panel where you can specify the font, font weight, letter spacing, and line height. You can also change the asset's name after it's saved.

How to Add and Use Icons in Penpot

You can add icon packs and libraries in Penpot from the Project dashboard. At the bottom of the page, a banner containing a list of commonly used libraries is displayed. These libraries usually include a few icon packs. You can scroll through to choose one or click on the explore more option at the end of the slider to open up the dedicated Penpot templates page.

If you find a relevant library from the bottom banner, click the download icon. Penpot will prompt you to add the selected library. Once you accept it, it will be added to the "Libraries" menu item on the left side panel.

If you click through to the dedicated templates page, clicking the download icon will download a Penpot file. You can then drag it to the projects page, and it will also be available in the "Libraries" section of the projects page.

To use the libraries within your project file, click the "Assets" tab on the left side panel, then click the "Libraries" button below it. This will open a modal with all your libraries listed under "Shared Libraries."

Click on the plus icon on the ones you want to use in your project. This will link that library to your project and be available in the left side panel. You can then search for any particular icon from the search bar and drag it onto the canvas.

To remove a library from your project, click on the libraries button. In the modal, under "libraries in this file," all used libraries are listed. Click on the link icon next to the library you want to remove. This will delink it and remove it from the side panel.

Figma Vs. Penpot – My experience

As a first-time user of Penpot and a long-term casual user of Figma, I noticed some differences and encountered some teething problems.

Swapping Out Icons

You can swap out components in Penpot! It's too bad that I discovered this after I had finished my first component migration.

Renaming Files and Folders

I struggled to find how to rename files and folders in Penpot. I kept looking for the shortcut or a menu item in the context menu. It turns out you have to double-click on the title to change it. You can rename files in the same way in Figma, but I just never did it like that.

Adherence to Web Standards

I was pleasantly surprised at the code quality that Penpot provides, along with your designs. It meets the w3c standards, but the HTML could be more semantic.

Penpot Design System

Penpot avails its design system along with lots of little libraries that help you understand how the tool works. This is very nice as it allows you to get a good understanding of design language and how to organize design systems.

The Penpot toolbar lacks essential shapes such as pen, arrow, and triangle. While you can recreate this with the path tool or use a library to import them, it is definitely something I missed that was readily available in Figma.

It took me a few tries to get comfortable with Penpot and in the end, I really liked it. Plus, its open-source nature makes it even more endearing.

Resources and Notes

Using Penpot has a learning curve, even if you are familiar with other design tools like Figma. These resources can help you get up to speed faster and make you more efficient with Penpot.

How to Quickly Add Auth to your Flutter Apps with Supabase Auth UI

Fatuma Abdullahi — Mon, 03 Jun 2024 19:55:22 +0000

In this article, you will learn how to use Supabase's auth package to quickly and efficiently add authentication functionality to your Flutter apps. We will go through the entire process, from setting up a Flutter project to configuring Email/Password, OAuth, and Magic link flows.

In the end, you'll have a complete authentication system with theming, localisation, and native support.

Prerequisites
What is Supabase Auth UI
Supported Authentication Methods
How to Set Up a Flutter Project
How to Connect to a Supabase Project
How to Implement Auth in a Flutter App
How to Set Up Supabase Email and OAuth Provider Authentication
- How to Set Up GitHub as an OAuth Provider
- How to Set Up Google as an OAuth Provider
How to Sign in a User using the Auth UI Package
How to Add Magic Link Auth
Native Auth Support - How to Sign in with Google
How to Theme Your Supabase Auth UI
- Flexible Layout Options
- Localization and Translation Ready
Summary
Resources

Prerequisites

This article assumes that you have:

A basic understanding of Flutter
Flutter installed and ready to go
A basic understanding of Backend-as-a-Service concepts
A basic understanding of authentication
An IDE (Integrated Developer Environment) or a text editor to work in

What is Supabase Auth UI?

Supabase Auth UI is an open-source community-supported Flutter package that offers pre-configured, theme-able widgets to simplify the process of creating authentication forms.

What's more? It's translation ready.

Supported Authentication Methods

The Supabase auth UI supports the following authentication methods out of the box:

Magic links
Email and Password auth
OAuth/Social login auth
Sign in with Google
Sign in with Apple

How to Set Up a Flutter Project

The first thing you will need is a Flutter project set up. Open your preferred text editor to the location you'd like to keep the Flutter project, then open up the integrated terminal and run flutter create auth_example. This will create a folder called "auth_example" in the same location.

Open the newly created folder and paste the following in the pubspec.yaml file as part of the dependencies: supabase_auth_ui: ^0.4.4.

The file should look similar to this:

_A code snippet showing a Flutter pubspec.yaml file with dependencies. The supabase_auth_ui dependency is highlighted with a pink arrow, indicating version ^0.4.4._

Back in the integrated terminal, run cd auth_example to change into the correct folder then run flutter pub get to get the auth dependency into your project.

How to Connect to a Supabase Project

Go to your Supabase dashboard or create an account if you don't have one. In the dashboard, go to Project settings at the bottom then click on API under configuration. Copy the URL and the project anon key from the right hand side of the page as illustrated below:

A screenshot of the API settings page in Supabase dashboard. The left sidebar shows various menu options under "Project Settings," "Configuration," and "Billing." The "API" option under "Configuration" is highlighted. The main section displays fields for "Project URL" and "Project API keys," with options to copy or reveal the keys.

Back in your Flutter app, create a .env file at the root of the folder and paste the following, replacing with the values you copied above:

SUPABASE_URL=your_url
SUPABASE_ANON_KEY=your_project_anon_key

Add the environment file to the .gitignore file to keep it out of version control, then add the flutter_dotenv package to the list of dependencies right below supabase_auth_ui dependency. Finally add the .env file as a path under the assets key in the pubspec.yaml file.

The file should look like so:

_A screenshot of a code editor displaying a pubspec.yaml file for a Flutter project. The file lists dependencies such as flutter, supabase_auth_ui, and flutter_dotenv. Two pink arrows point to the supabase_auth_ui: ^0.4.4 and flutter_dotenv: ^5.1.0 dependencies. The file also includes sections for dev_dependencies, flutter_lints, and assets._

In the main.dart file, replace the main function with the following code:

void main() async {
  await dotenv.load(fileName: ".env");
  await Supabase.initialize(
      url: dotenv.env['SUPABASE_URL']!,
      anonKey: dotenv.env['SUPABASE_ANON_KEY']!);
  runApp(
    const MyApp(),
  );
}

This loads the .env file and initialises Supabase.

How to Implement Auth in a Flutter App

Replace the rest of the code below the main function with the following:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Supabase Auth UI',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple),
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => const SplashScreen(),
        '/auth': (context) => AuthScreen(),
        '/home': (context) => HomeScreen(),
      },
    );
  }
}

Create a splash_screen.dart file in the lib folder and paste the following in it:

import 'package:auth_ui_example/auth_screen.dart';
import 'package:auth_ui_example/home_screen.dart';
import 'package:flutter/material.dart';

import 'package:supabase_auth_ui/supabase_auth_ui.dart';

final activeSession = Supabase.instance.client.auth.currentSession;

class SplashScreen extends StatelessWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: activeSession == null ? AuthScreen() : HomeScreen()),
    );
  }
}

This redirects the user to a different screen depending on whether or not the user has an active session.

Now create a new file in the lib folder called home_screen.dart and paste the following into it:

import 'package:flutter/material.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

final supabase = Supabase.instance.client;
final activeSession = supabase.auth.currentSession;

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
    if (activeSession == null) {
      Navigator.pushNamed(context, '/auth');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'You are home - ${activeSession?.user.id}',
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
            const SizedBox(height: 24.0),
            ElevatedButton(
              onPressed: () async {
                await supabase.auth.signOut();
                Navigator.pushNamed(context, '/');
              },
              child: const Text('Sign out'),
            ),
          ],
        ),
      ),
    );
  }
}

This creates a stateful widget class that checks for an active session and redirects to the authentications screen if there is no active session. It also displays some text and a button that allows the user to sign out of the application.

Finally, create auth_screen.dart in the lib folder and paste the following into it:

import 'package:flutter/material.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

class AuthScreen extends StatelessWidget {
  const AuthScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.fromLTRB(24.0, 96.0, 24.0, 24.0),
        children: [
          Column(
            children: [
              const Text(
                'Supabase Auth UI',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
              const SizedBox(height: 24.0),
              SupaEmailAuth(
                redirectTo:
                    kIsWeb ? null : "myapptest://com.example.auth_ui_example",
                onSignInComplete: (res) => Navigator.pushNamed(context, '/home'),
                onSignUpComplete: (res) => Navigator.pushNamed(context, '/home'),
                onError: (error) => SnackBar(content: Text(error.toString())),
              ),
              SupaSocialsAuth(
                socialProviders: const [
                  OAuthProvider.google,
                  OAuthProvider.github,
                ],
                redirectUrl:
                    kIsWeb ? null : "myapptest://com.example.auth_ui_example",
                onSuccess: (session) => Navigator.pushNamed(
                  context,
                  '/home',
                ),
                onError: (error) => SnackBar(
                  content: Text(
                    error.toString(),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

This displays some text and special widgets from the supabase_auth_ui package that display a sign up/in form and some social login options.

In the integrated terminal, run flutter run to start the application. It will give you several platforms to run on, so just choose chrome for this case. You should see this beautiful interface out of the box 🎉:

Supabase Auth UI login screen with fields for email and password, options to sign in, reset password, sign up, and buttons to continue with Google or GitHub.

Taking a closer look at the code in the auth screen file, you will see that we are using SupaEmailAuth and SupaSocialsAuth widgets to achieve this. The email auth widget takes in a callback telling it what to do on failure and on success of the authentication action. The social login widget takes the same, plus a list of OAuth providers you wish to use in your application.

How to Set Up Supabase Email and OAuth Provider Authentication

To have Supabase auth UI work properly on both mobile and web, you will need to set up deep links and a site URL.

Under authentication > URL configurations, add "http://localhost:3000/" as the site URL.

Then under "redirect URLs" add "YOUR_SCHEME://YOUR_HOSTNAME" as the value, where YOUR_SCHEME is a unique identifier that you decide for your app and YOUR_HOSTNAME is the package name in your build.gradle file as applicationID under android > src > build.gradle. Something like this: "myapptest://com.example.auth_ui_example".

Complete configuring Android by going to the AndroidManifest file under android > src > main > AndroidManifest.xml, and adding this code below the existing , above the closing tag:

 <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <category android:name="android.intent.category.BROWSABLE" />
                <data
                android:scheme="myapptest"
                android:host="com.example.auth_ui_example" />
 intent-filter>

Complete the iOS configuration by pasting the following code at the bottom of the info.plist file, just above the closing tag, under ios > Runner > info.plist:

<key>CFBundleURLTypeskey>
<array>
    <dict>
        <key>CFBundleTypeRolekey>
        <string>Editorstring>
        <key>CFBundleURLSchemeskey>
        <array>
            
            <string>myappteststring>
        array>
    dict>
array>

That completes the set up across web and mobile.

To set up email auth, in the Supabase dashboard, go to authentication > providers, and look for email. Make sure it is enabled. That's all for setting up email.

How to Set Up GitHub as an OAuth Provider

To enable GitHub as an authentication provider, scroll down the list of providers until you get to GitHub. Open the dropdown, enable it, and copy the callback URL. Then follow these steps:

Create a new OAuth App here, fill in the required information, and add the copied URL under the authorization URL field.
Add the homepage URL as "http://localhost:3000/".
Copy the clientID from GitHub and add it to the Supabase GitHub provider settings.
Generate a new secret and paste it into the client secret field in the Supabase GitHub provider settings.

Save it, and you are done with setting up GitHub as a provider.

How to Set Up Google as an OAuth Provider

Go back to the Supabase dashboard and enable the Google provider. Copy the callback URL, then follow these steps:

Create a new Google cloud project.
Go to Credentials, click on the create credentials button, and then choose OAuth client ID.
Go on and configure the consent screen to external users.
Go back to credentials, click create credentials, and choose web application in the application type field.
Copy the callback URL from the Supabase settings, paste it in under the authorised URLs field, and leave the rest as is and save.
A screen will pop up with the client ID and secret. Copy those over and paste them in the relevant fields in the Supabase Google provider settings.

Save it, and you are done with setting up Google as a provider.

To test that auth is working so far, go back to your application, run flutter run -d chrome --web-port=3000 in the integrated terminal window, and click one of the Social login buttons.

You should be presented with a window asking you to confirm permissions, after which the app will sign you in. Signing in via email/password should also work.

Authorization screen for "Test Flutter auth ui" requesting access to a GitHub account. Options to "Cancel" or "Authorize FatumaA" are available.

Now log out of the application and try to manually navigate to the home screen. It will redirect you back to the auth screen.

How to Add Magic Link Auth

If you only want to sign in a user using magic link, replace the contents in the auth_screen file with this:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

class AuthScreen extends StatelessWidget {
  const AuthScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.fromLTRB(24.0, 96.0, 24.0, 24.0),
        children: [
          Column(
            children: [
              const Text(
                'Supabase Auth UI',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
              const SizedBox(height: 24.0),
              SupaMagicAuth(
                redirectUrl:
                    kIsWeb ? null : "myapptest://com.example.auth_ui_example",
                onSuccess: (session) => Navigator.pushNamed(context, '/home'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Run the app and you should see this:

Supabase authentication interface with an email input field and a 'Continue with magic Link' button.

To add native sign in with Google support across Android, Web, and iOS, you'll need to add a few more configurations.

Go back to your Google cloud project and create a new credential. Choose OAuth client ID. Click on Android from the application type dropdown.

Next, add the package name. You can find this in the AndroidManifest.xml file under android > src > main > AndroidManifest.xml or in the build.gradle file as applicationID under android > src > build.gradle.

To generate the SHA1 certificate fingerprint, paste the following code into a terminal window.

keytool -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

When prompted for a password, enter "android". Copy the generated SHA-1 certificate and paste it into the relevant field in your OAuth client ID set up above and create the project. Close the pop up with the Android client ID.

Go back and create a new OAuth client ID, but this time set it as an iOS app. Provide it the same value as the package name from before and create it. Close the pop up as before.

In your Flutter application, paste the following code above the custom URL scheme you previously added in the info.plist file. Replace the part in caps with the first part of the iOS client ID you created above minus the apps.google... part.


            <string>com.googleusercontent.apps.FIRST_PART_OF_IOS_CLIENT_ID_MINUS_apps.googleusercontent.com_PARTstring>
                       
            
            <string>myappteststring>

In the auth_screen file, replace the SupaSocialsAuth widget with this:

              SupaSocialsAuth(
                redirectUrl:
                    kIsWeb ? null : "myapptest://com.example.auth_ui_example",
                nativeGoogleAuthConfig: NativeGoogleAuthConfig(
                    iosClientId: dotenv.env['IOS_CLIENT_ID']!,
                    webClientId: dotenv.env['WEB_CLIENT_ID']!),
                socialProviders: const [
                  OAuthProvider.google,
                  OAuthProvider.github,
                ],
                onSuccess: (session) => Navigator.pushNamed(
                  context,
                  '/home',
                ),
                onError: (error) => SnackBar(
                  content: Text(
                    error.toString(),
                  ),
                ),
              ),

Add the iOS and Web client secret from Google cloud to your .env file and you are ready to test.

Start the Android or iOS emulator. Then back in your Flutter project, run flutter run in your integrated terminal. Something like this should show up:

A mobile app screen displaying the Supabase Auth UI on an iOS emulator. The interface includes fields for entering an email and password, a "Sign In" button, options for password recovery, account sign-up, and login buttons for Google and GitHub.

Click on the Google icon and you should be logged in.

How to Theme Your Supabase Auth UI

Now that you have confirmed that the package actually works, it's time for the fun part. Supabase auth UI allows you to customise the look and the layout of the widgets.

In main.dart, replace the ThemeData widget under the MaterialApp with the following:

ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.purple),
        inputDecorationTheme: const InputDecorationTheme(
          border: OutlineInputBorder(),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.purple, width: 2.0),
          ),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.deepPurple,
            foregroundColor: Colors.white,
          ),
        ),
      ),

Notice how the sign up form responds to the theme changes:

A login interface for Supabase Auth UI. It includes fields for entering an email and password, with icons indicating their respective purposes. Below the fields is a purple "Sign In" button. Links for "Forgot your password?" and "Don't have an account? Sign up" are located at the bottom.

Flexible Layout Options

Supabase auth UI allows you to layout the social login buttons vertically and horizontally. To see this in action, add the following line in the SupaSocialsAuth widget: socialButtonVariant: SocialButtonVariant.icon,. The layout should go from this:

A login interface for Supabase Auth UI with fields for email and password, a "Sign In" button, options to reset the password or sign up, and buttons to continue with Google or GitHub layout vertically with text and icons.

To this:

Login screen for Supabase Auth UI with fields for email and password, a "Sign In" button, options for password recovery, account creation, and login via Google or GitHub in circular icons layout horizontally

Localization and Translation Ready

Supabase auth UI is translation ready, and you can change the labels to any language you wish.

Replace the code in auth_screen with the following:

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:supabase_auth_ui/supabase_auth_ui.dart';

class AuthScreen extends StatelessWidget {
  const AuthScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.fromLTRB(24.0, 96.0, 24.0, 24.0),
        children: [
          Column(
            children: [
              const Text(
                'Supabase Auth UI',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
              const SizedBox(height: 24.0),
              SupaEmailAuth(
                redirectTo:
                    kIsWeb ? null : "myapptest://com.example.auth_ui_example",
                localization: const SupaEmailAuthLocalization(
                    enterEmail: "Ingiza barua pepe yako",
                    validEmailError: "'الرجاء إدخال عنوان بريد إلكتروني صالح",
                    enterPassword: "Ingresa tu contraseña",
                    passwordLengthError:
                        'Tafadhali ingiza nenosiri lenye herufi angalau 6',
                    signIn: 'تسجيل الدخول',
                    signUp: 'Registrarse',
                    forgotPassword: 'Umesahau nenosiri lako?',
                    dontHaveAccount: 'لا تملك حساب؟ سجل',
                    haveAccount: '¿Ya tienes una cuenta? Inicia sesión',
                    sendPasswordReset:
                        'Tuma barua pepe ya kurekebisha nenosiri',
                    backToSignIn: 'العودة إلى تسجيل الدخول',
                    unexpectedError: 'Se produjo un error inesperado'),
                onSignInComplete: (e) => Navigator.pushNamed(context, '/home'),
                onSignUpComplete: (e) => Navigator.pushNamed(context, '/home'),
                onError: (error) => SnackBar(content: Text(error.toString())),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

The screen is now translated to Swahili, Arabic, and Spanish. Run flutter run -d chrome --web-port=3000 and you should see this:

A login interface titled "Supabase Auth UI" with fields for entering email and password in different languages. The email field is labeled "Ingiza barua pepe yako" and the password field is labeled "Ingresa tu contraseña." There is a purple login button with Arabic text. Below the button, there are links for forgotten password and account registration in Swahili and Arabic.

Type a wrong email and press sign in button to trigger the error messages. Your app should now be a polyglot, as shown below:

A login interface titled "Supabase Auth UI" with fields for email and password. The email field contains "ggg" and has an error message in multiple languages. The password field is empty with a placeholder in Spanish. Below, there is a purple login button with text in Arabic. Additional text in Swahili and Arabic is present below the button.

Summary

Supabase auth UI is a package that makes it exceptionally easy to get started with adding authentication flows in your flutter apps. It provides customizable, translation -ready widgets out of the box.

It is open-source and always looking for more contributions. Remember to leave a star on the repository.

Resources

Here are some links that might be useful:

How to Build an AI-enhanced Task App with React and Appwrite

Fatuma Abdullahi — Wed, 13 Mar 2024 09:21:45 +0000

In this article, you'll build a task manager application that has some artificial intelligence capabilities and is voice-enabled, sortable, and searchable.

As an extra, the application will have dark mode support that respects the users' system preferences.

The application will be able to create, read, update and delete (CRUD) tasks as well as the ability to view a given task.

You'll build this application using Appwrite as a backend, React on the frontend, Typescript for type safety and Tailwind CSS for styling.

Prerequisites
What is Appwrite?
How to Set Up the Appwrite Backend
How to Set up the React Frontend
How to Connect to the Appwrite Project
How to Build the Task Manager Application
Notes
Limitations

Prerequisites

You will need the following to be able to build along with this article:

Basic programming knowledge
Basic understanding of React, Typescript and Tailwind
An Appwrite account
And a text editor to code along

What is Appwrite?

Appwrite is an open source Backend-as-a-Service (BaaS) platform. A BaaS is a cloud service that packages backend tasks that are typically needed for most applications.

Appwrite offers both a managed database, authentication, functions and storage services and the ability to self-host the entire platform on your own.

Appwrite recently announced a host of new features that makes developers building on their platform lives more straightforward. You can read on that here.

How to Set Up the Appwrite Backend

Before starting to build the application and interacting with Appwrite, you'll need an Appwrite account and to set up the project.

Once you have the account ready, you will need to create an organization, then create a project within that organization. You can name the project "Tasks App" or any other name you see fit.

Note: Appwrite cloud restricts you to one organization per account on the hobby/free plan. If you already had an organization, you can go straight to creating a project within your existing organization.

In your Tasks App project, add a web platform and follow the prompts. For the hostname, add "localhost" for now. This is to allow the frontend to bypass CORS when interacting with the Appwrite backend.

A picture of the Appwrite Console showing the "Add a platform" section

Copy the installation instructions as you complete setting up the web platform for the project. Keep these safe, you will need them when setting up the frontend.

You should now be in the Appwrite cloud console. Click on the "Databases" on the left sidebar. Then click on the pink "Create database" button. Name your database and leave the autogenerated ID as is.

Now, click on the "Create collection" button, name your collection "tasks" and leave the autogenerated ID as is. Now, click on the grey "Create attribute" button as shown below:

A picture of the Appwrite Console showing the "Create attribute" button

Add the following attributes:

title of type String, give it a size of 49 and make it required
description of type String, give it a size of 200
due_date of type Datetime, make it required
done of type Boolean, give it a default of False
priority of type String, give it a size of 10

Finally, you need to set permissions in order for your React frontend to interact with Appwrite services. In this case, allow any one to have access. This is not ideal for production and you can read more about Appwrite permissions here.

Go to the console, click on databases, then your task database and then your tasks collection, then click on settings and scroll down to permissions. Add permissions for "Any" role and give them full CRUD access.

You are now ready to start setting up the frontend and to connect it to the Appwrite project you just completed prepping.

How to Set up the React Frontend

Open your text editor to your preferred location. Then open the integrated terminal and run the following command to create a Vite-based application:


//taskwrite is the name of the application
npm create vite@latest taskwrite

Choose React and then plain Typescript when prompted. This will create a React application with Typescript already set up for you.

Change folders into the newly created "taskwrite" one by running cd taskwrite from the terminal. Run the following command in the same terminal window to add Tailwind to the application:


npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then in your tailwind.config.js file which is in the root of the Taskwrite application, replace the "content" key with content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],. The file should look like this:


/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

This tells Tailwind that it should look for its classes in the index.html file at the root and in files within the src folder that end with either .js, .ts, .jsx or .tsx extensions.

Then open the src folder and delete the "App.css" file. Open the index.css file and replace its contents with the following:


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Quicksand:wght@300..700&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root{
        --base-bg: #ffffff;
        --btn-bg-primary: #be185d;
        --btn-bg-primary-hover: #9d174d;
        --btn-icon-main: #1e293b;
        --btn-bg-ok: #4ade80;
        --btn-bg-light-ok: #bbf7d0;
        --btn-bg-light: #e5e7eb;
        --low-priority: #facc15;
        --medium-priority: #fb923c;
        --high-priority: #f87171;
        --text-error: #dc2626;
        --text-ok: #16a34a;
        --text-main: #262626;
        --border-container: #9ca3af;
        --border-input: #1e293b;
        --border-error: #dc2626;
    }

    body{
        background-color: var(--base-bg);
        color: var(--text-main);    
    }

    #date::-webkit-calendar-picker-indicator {
        background-color: var(--btn-bg-light); 
    }
}

This adds some custom css variables to the application. The variables map to Tailwind colors.

Next, paste the following into the tailwind.config.js at the root of the application:


/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {
            textColor: {
                error: "var(--text-error)",
                ok: "var(--text-ok)",
                main: "var(--text-main)",
                iconColor: "var(--btn-icon-main)",
            },
            backgroundColor: {
                base: "var(--base-bg)",
                primary: "var(--btn-bg-primary)",
                primaryHover: "var(--btn-bg-primary-hover)",
                ok: "var(--btn-bg-ok)",
                lightOk: "var(--btn-bg-light-ok)",
                light: "var(--btn-bg-light)",
                lowPriority: "var(--low-priority)",
                mediumPriority: "var(--medium-priority)",
                highPriority: "var(--high-priority)",
            },
            borderColor: {
                container: "var(--border-container)",
                input: "var(--border-input)",
                error: "var(--border-error)",
            },
        },
    },
    plugins: [],
};

This ties the CSS variables to the tailwind config and makes them available to use in our application.

Now Taskwrite is set up with React, Typescript and Tailwind.

How to Connect to the Appwrite Project

Firstly, you need to add the Appwrite dependency to the React application. Run the following command in the terminal window to do that: npm i appwrite.

Next thing is to set up the Appwrite keys we need as environment variables. In the .gitignore file at the root of the application, add *.env at the top of the file then save. This will ensure that the .env file you'll create is not added to version control.

Now, create a .env file at the root of the React application and paste the following variables in it:


//replace the right hand side of the equal sign with the correct values from your Appwrite project.
VITE_APPWRITE_URL=YOUR-APPWRITE-API-ENDPOINT
VITE_APPWRITE_PROJ_ID=YOUR-APPWRITE-PROJECT-ID

You can get the necessary values in your Appwrite console. Click on the settings tab at the bottom of the left sidebar and copy API credentials.

Next, create a utils folder in the src folder of the React application. Add a file called appwrite.ts within it and paste the following config information:


import { Client, Databases } from "appwrite";

export const client = new Client();

client
    .setEndpoint(import.meta.env.VITE_APPWRITE_URL)
    .setProject(import.meta.env.VITE_APPWRITE_PROJ_ID);

export const databases = new Databases(client);

export { ID } from "appwrite";

You are ready to test that the React application is connected to the Appwrite project. Replace everything in the App.tsx file within the src folder with the following code:


import { client } from "./utils/appwrite";

const App = () => {
    console.log("Appwrite", client);
    return "text-purple-500 text-center font-bold text-      5xl">App;
};

export default App;

Then open an integrated terminal window and run the following command: npm run dev. This will run your React application at this URL: http://localhost:5173/. Open the URL in a browser window and open the browser console.

You should see a large purple text "App" in the center of the screen and the Appwrite client logged in the console like so:

The web app running in the browser

Now you need to grab the database ID and the collection ID from the Appwrite console. Click on the databases tab on the left sidebar, hover on the database ID value and click to copy it.

Go back to your .env file and add an entry like so:


//replace the right hand side of the equal sign with the correct values from your Appwrite project.
VITE_APPWRITE_URL=YOUR-APPWRITE-API-ENDPOINT
VITE_APPWRITE_PROJ_ID=YOUR-APPWRITE-PROJECT-ID
//new entry below
VITE_APPWRITE_DB_ID=YOUR-APPWRITE-DB-ID

Lastly, go back to the console and click through the database to get to the collections. Hover and copy collection ID like before, then add it just below the database ID in your env file like so:


VITE_APPWRITE_DB_ID=YOUR-APPWRITE-DB-ID
VITE_APPWRITE_COLLECTION_ID=YOUR-APPWRITE-COLLECTION-ID

With that, the set up part of building Taskwrite is complete.

How to Build the Task Manager Application

To make it easier to work with Typescript, you will need to add interfaces that correspond with the shape of the Appwrite database response.

In your src folder, create a folder called models and in it, create a file called interface.ts. Paste the following in the file:


import { Models } from "appwrite";

export interface IPayload {
    title: string;
    description: string;
    due_date: Date;
    priority?: string;
    done?: boolean;
}

export interface ITask extends Models.Document {
    title: string;
    description: string;
    due_date: Date;
    priority?: string;
    done: boolean;
}

Here, you are defining an interface called "IPayload" with the same attributes as the task we defined in the Appwrite project. Then you are defining another interface called "ITask" that extends the built in base Model from Appwrite.

This means that ITask has both the attributes of the task we defined before and the built in base attributes that Appwrite collections come with.

Next, in your utils folder add a file called db.ts and paste the following in it:


import { ID, databases } from "./appwrite";
import { IPayload } from "../models/interface";

const dbID: string = import.meta.env.VITE_APPWRITE_DB_ID;
const collectionID: string = import.meta.env.VITE_APPWRITE_COLLECTION_ID;

const createDocument = async (payload: IPayload) => {
    const res = await databases.createDocument(dbID, collectionID, ID.unique(), {
        ...payload,
    });

    return res;
};

const readDocuments = async () => {
    const res = await databases.listDocuments(dbID, collectionID);

    return res;
};

const updateDocument = async (payload: IPayload, id: string) => {
    const res = await databases.updateDocument(dbID, collectionID, id, {
        ...payload,
    });

    return res;
};
const deleteDocument = async (id: string) => {
    const res = await databases.deleteDocument(dbID, collectionID, id);

    return res;
};

export { createDocument, readDocuments, updateDocument, deleteDocument };

This file defines four functions corresponding with the CRUD operations. The naming of the functions map to which operation it performs. For all functions, you pass the collection and database IDs so that Appwrite knows which resources to operate on.

To create a task on the Appwrite database, you pass an object with the shape of a task to the function and ask it to create a unique ID for each new task it creates.

To update a task, you pass it a task object similar to create but we also pass it the unique ID of the task to be updated.

To read all tasks from the Appwrite, you call the "listDocuments" function and to delete a task you pass the ID corresponding to the task to be deleted.

How to Set Up Routing with React Router V6

The Taskwrite application will have two routes and a navigation menu to help with that. To add navigation, open an integrated terminal and run the following command to install the React Router library: npm i react-router-dom.

Now, go to the main.tsx file in the src folder and paste the following in it:


import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
    
        
            
        
    
);

Then go to the App.tsx file in src folder and paste the following in it:


import "./index.css";
import { Route, Routes } from "react-router-dom";
import Task from "./routes/Task";
import Index from "./routes/Index";
import Navbar from "./components/Navbar";

function App() {
    return (
        <>
            
            
                "/" element={} />
                "/tasks" element={} />
            
        
    );
}

export default App;

You now need to create the referenced component above. In the src folder, create a folder called routes and within it create two files called Index.tsx and Task.tsx.

In Index.tsx, paste the following:


const Index = () => {
    return (
        "container mx-auto">
            "max-w-5xl mx-auto m-12 p-16">
                "text-4xl md:text-7xl font-bold text-center py-3 mb-16">
                    AI-enhanced, Voice-enabled, Searchable Task Manager
                
            
        
    );
};

export default Index;

And in Task.tsx, paste the following:


const Task = () => {
    return (
        "container mx-auto">
            "max-w-5xl mx-auto m-12 p-16">
                "text-4xl md:text-7xl font-bold text-center py-3 mb-16">
                    Your Tasks
                
            
        
    );
};

export default Task;

Now, create a components folder in the src folder and add a file within it called Navbar.tsx. Paste the following in that file:


import { Link, useNavigate } from "react-router-dom";
import { PencilIcon } from "@heroicons/react/24/solid";
import Button from "./Button";

const Navbar = () => {
    const navigate = useNavigate();

    return (
        "py-4 border-b-2 border-container shadow-md shadow-gray-400 w-full fixed top-0 bg-base">
            "flex items-center justify-between  w-11/12 mx-auto">
                "/">
                    
        
    );
};

export default Navbar;

This file contains navigation menu that switches between the two pages. You will need to create the Button component referenced above and add the Hero icons package.

In an integrated terminal, run the following to add Hero icons: npm i @heroicons/react . Next, add a new file called Button.tsx in the components folder. Paste the following within that file:

import { ReactNode } from "react";

interface ButtonProps {
    extraBtnClasses?: string;
    textColor?: string;
    handleClick?: (e: React.MouseEvent) => void;
    title?: string;
    disable?: boolean;
    type?: "button" | "submit" | "reset";
    children: ReactNode;
}

function Button({
    extraBtnClasses,
    textColor,
    handleClick,
    title,
    disable,
    type = "button",
    children,
}: ButtonProps) {
    const handleClickProp = type === "submit" ? undefined : handleClick;

    return (
        
    );
}

export default Button;

This file describes a shared button component and defines the props that it will accept.

Go back and fix any import errors and re-run the application by running npm run dev, you should see something like this:

app running with npm run dev command

How to Create the Form Component

Add a new file called AddTask.tsx in the components folder and paste the following into it:


import { useState } from "react";
import Select from "./Select";
import Button from "./Button";

const AddTask = () => {
    const [titleVal, setTitleVal] = useState("");
    const [textAreaVal, setTextAreaVal] = useState("");
    const [dueDate, setDueDate] = useState(new Date());

    const priorityArray = ["low", "medium", "high"];

    const [priority, setPriority] = useState(priorityArray[0]);

    return (
        "form" className="m-8">
            "flex flex-col mb-6">
                "title">Task Title
                type="text"
                    id="title"
                    placeholder="Title of your task"
                    value={titleVal}
                    onChange={(e) => setTitleVal(e.target.value)}
                    className="bg-inherit border rounded-sm p-2 focus:outline-none focus:ring-1 border-input focus:ring-slate-900"
                />
            
            "flex flex-col mb-6">
                "description" className="mb-1">
                    Task Description
                
                "description"</span>
                    placeholder=<span class="hljs-string">"Describe your task"</span>
                    maxLength={<span class="hljs-number">200</span>}
                    value={textAreaVal}
                    onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> setTextAreaVal(e.target.value)}
                    className=<span class="hljs-string">"bg-inherit border rounded-sm p-2 h-32 resize-none focus:outline-none focus:ring-1 border-input focus:ring-slate-900"</span>
                />
            </div>
            <div className=<span class="hljs-string">"flex flex-col mb-6"</span>>
                <label htmlFor=<span class="hljs-string">"description"</span> className=<span class="hljs-string">"mb-1"</span>>
                    Task Priority
                </label>
                <Select
                    defaultSelectValue={priority}
                    selectOptions={priorityArray}
                    handleSelectChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> setPriority(e.target.value)}
                />
            </div>
            <div className=<span class="hljs-string">"flex flex-col mb-6"</span>>
                <label htmlFor=<span class="hljs-string">"description"</span> className=<span class="hljs-string">"mb-1"</span>>
                    Task Due <span class="hljs-built_in">Date</span>
                </label>
                <input
                    <span class="hljs-keyword">type</span>=<span class="hljs-string">"date"</span>
                    id=<span class="hljs-string">"date"</span>
                    value={dueDate!.toISOString().split(<span class="hljs-string">"T"</span>)[<span class="hljs-number">0</span>]}
                    min={<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>().toISOString().split(<span class="hljs-string">"T"</span>)[<span class="hljs-number">0</span>]}
                    onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> setDueDate(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(e.target.value))}
                    className=<span class="hljs-string">"bg-inherit border rounded-sm border-input p-2 focus:outline-none focus:ring-1 focus:ring-slate-900 invalid:focus:ring-red-600"</span>
                />
            </div>
            <Button
                <span class="hljs-keyword">type</span>=<span class="hljs-string">"submit"</span>
                content={{
                    text: <span class="hljs-string">"Add Task"</span>,
                }}
                extraBtnClasses=<span class="hljs-string">"bg-pink-700 justify-center text-white font-semibold px-4 py-2 outline-1 hover:bg-pink-800 focus:ring-1 focus:ring-pink-800 w-full"</span>
            />
        </form>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> AddTask;
</code></pre>
<p>Now create a new file in components called <strong>Select.tsx</strong>, paste the following in it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> { useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;

<span class="hljs-keyword">interface</span> SelectProps {
    defaultSelectValue: <span class="hljs-built_in">string</span>;
    selectOptions: <span class="hljs-built_in">string</span>[];
    handleSelectChange: <span class="hljs-function">(<span class="hljs-params">e: React.ChangeEvent<HTMLSelectElement></span>) =></span> <span class="hljs-built_in">void</span>;
}

<span class="hljs-keyword">const</span> Select = <span class="hljs-function">(<span class="hljs-params">{
    defaultSelectValue,
    handleSelectChange,
    selectOptions,
}: SelectProps</span>) =></span> {
    <span class="hljs-keyword">const</span> [selectVal, setSelectVal] = useState(defaultSelectValue);
    <span class="hljs-keyword">return</span> (
        <select
            value={selectVal}
            onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {
                setSelectVal(e.target.value);
                handleSelectChange(e);
            }}
            className=<span class="hljs-string">"bg-inherit border rounded-sm border-input p-2 focus:outline-none focus:ring-1 focus:ring-slate-900 cursor-pointer"</span>
        >
            {selectOptions.map(<span class="hljs-function">(<span class="hljs-params">option</span>) =></span> (
                <option key={option} value={option}>
                    {option.charAt(<span class="hljs-number">0</span>).toUpperCase() + option.slice(<span class="hljs-number">1</span>)}
                </option>
            ))}
        </select>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Select;
</code></pre>
<p>This defines a <code>Select</code> component and its props. The <code>Select</code> component props are a function for handling change, an array of options and the default value it should display. </p>
<p>Now, import the <code>AddTask</code> component in the <strong>Index.tsx</strong> file between the <code>h1</code> tags like so: </p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> AddTask <span class="hljs-keyword">from</span> <span class="hljs-string">"../components/AddTask"</span>;

<span class="hljs-keyword">const</span> Index = <span class="hljs-function">() =></span> {
    <span class="hljs-keyword">return</span> (
        <main className=<span class="hljs-string">"container mx-auto"</span>>
            <section className=<span class="hljs-string">"max-w-5xl mx-auto m-12 p-16"</span>>
                <h1 className=<span class="hljs-string">"text-4xl md:text-7xl font-bold text-center py-3 mb-16"</span>>
                    AI-enhanced, Voice-enabled, Searchable Task Manager
                </h1>
                <AddTask />
            </section>
        </main>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Index;
</code></pre>
<p>Your application should now display the form:</p>
<p>
<em>task app form</em></p>
<h3 id="heading-how-to-set-up-form-to-create-task">How to Set Up Form to Create Task</h3>
<p>To make the form functional, you need to hook it up to a submit function that will call the create function defined in the <strong>db.ts</strong> file. </p>
<p>Additionally, you will need to validate the form to avoid sending bad data and having Appwrite send errors back to the React application.</p>
<p>In the <code>AddTask</code> component file, paste the following code above the <code>return</code> statement and below the <code>setPriority</code> useState:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [priority, setPriority] = useState(priorityArray[<span class="hljs-number">0</span>]);

<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> navigate = useNavigate();

<span class="hljs-keyword">const</span> [isSubmitting, setIsSubmitting] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> [titleValidationError, setTitleValidationError] = useState(<span class="hljs-string">""</span>);

    <span class="hljs-keyword">const</span> handleTitleChange = <span class="hljs-function">(<span class="hljs-params">e: React.ChangeEvent<HTMLInputElement></span>) =></span> {
        setTitleVal(e.target.value);

        <span class="hljs-keyword">if</span> (e.target.value.trim() !== <span class="hljs-string">""</span>) {
            setTitleValidationError(<span class="hljs-string">""</span>);
        }
    };

    <span class="hljs-keyword">const</span> handleSubmitTask = <span class="hljs-keyword">async</span> (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        setIsSubmitting(<span class="hljs-literal">true</span>);

        <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">if</span> (!titleVal) {
                setTitleValidationError(<span class="hljs-string">"Please provide at least a title for the task"</span>);
                <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> setTitleValidationError(<span class="hljs-string">""</span>), <span class="hljs-number">2000</span>);
                setIsSubmitting(<span class="hljs-literal">false</span>);
                <span class="hljs-keyword">return</span>;
            }

            <span class="hljs-keyword">if</span> (titleVal.length > <span class="hljs-number">49</span>) {
                setTitleValidationError(
                    <span class="hljs-string">"Title too long. It can only be 49 characters long"</span>
                );
                <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> setTitleValidationError(<span class="hljs-string">""</span>), <span class="hljs-number">2000</span>);
                setIsSubmitting(<span class="hljs-literal">false</span>);
                <span class="hljs-keyword">return</span>;
            }

            <span class="hljs-keyword">const</span> payload: IPayload = {
                title: titleVal,
                description: textAreaVal,
                due_date: dueDate,
                priority: priority,
            };

            <span class="hljs-keyword">await</span> createDocument(payload);

            <span class="hljs-comment">// reset form</span>
            setTitleVal(<span class="hljs-string">""</span>);
            setTextAreaVal(<span class="hljs-string">""</span>);
            setDueDate(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>());
            setPriority(priorityArray[<span class="hljs-number">0</span>]);
            setTitleValidationError(<span class="hljs-string">""</span>);
            setIsSubmitting(<span class="hljs-literal">false</span>);
            navigate(<span class="hljs-string">"/tasks"</span>);
        } <span class="hljs-keyword">catch</span> (error) {
            <span class="hljs-built_in">console</span>.error(<span class="hljs-string">"Error in handleSubmitTask:"</span>, error);
            setIsSubmitting(<span class="hljs-literal">false</span>);
        }
    };

    <span class="hljs-keyword">return</span> (
    <span class="hljs-comment">//rest of the code unchanged below</span>
</code></pre>
<p>Then replace the <code>return</code> statement with the following code:</p>
<pre><code>
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">form</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"form"</span> <span class="hljs-attr">onSubmit</span>=<span class="hljs-string">{handleSubmitTask}</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"m-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex flex-col mb-6"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"title"</span>></span>Task Title<span class="hljs-tag"></<span class="hljs-name">label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span>
            <span class="hljs-attr">type</span>=<span class="hljs-string">"text"</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"title"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Title of your task"</span>
            <span class="hljs-attr">value</span>=<span class="hljs-string">{titleVal}</span>
            <span class="hljs-attr">onChange</span>=<span class="hljs-string">{handleTitleChange}</span>
            <span class="hljs-attr">className</span>=<span class="hljs-string">{</span>`<span class="hljs-attr">bg-inherit</span> <span class="hljs-attr">border</span> <span class="hljs-attr">rounded-sm</span> <span class="hljs-attr">p-2</span> <span class="hljs-attr">focus:outline-none</span>                         <span class="hljs-attr">focus:ring-1</span> ${
                    <span class="hljs-attr">titleValidationError</span>
                    ? "<span class="hljs-attr">border-error</span> <span class="hljs-attr">focus:ring-red-500</span> <span class="hljs-attr">invalid:focus:ring-red-</span>                         <span class="hljs-attr">600</span>"
                    <span class="hljs-attr">:</span> "<span class="hljs-attr">border-input</span> <span class="hljs-attr">focus:ring-slate-900</span>"
            }`}
        /></span>
        {titleValidationError && (
        <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"text-error mt-1"</span>></span>{titleValidationError}<span class="hljs-tag"></<span class="hljs-name">span</span>></span>
        )}
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex flex-col mb-6"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"mb-1"</span>></span>
            Task Description
        <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">textarea</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"description"</span>
            <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"Describe your task"</span>
            <span class="hljs-attr">maxLength</span>=<span class="hljs-string">{200}</span>
            <span class="hljs-attr">value</span>=<span class="hljs-string">{textAreaVal}</span>
            <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span> =></span> setTextAreaVal(e.target.value)}
            className={`bg-inherit border rounded-sm p-2 h-32 resize-none                             focus:outline-none focus:ring-1 ${
                        textAreaVal.length > 197
                        ? "border-error focus:ring-red-500 invalid:focus:ring-                             red-600"
                        : "border-input focus:ring-slate-900"
                }`}
        />
        {textAreaVal.length > 197 && (
        <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"text-error mt-1"</span>></span>
            Warning description getting too long. Can only be 200 characters
        <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
        )}
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex flex-col mb-6"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"mb-1"</span>></span>
            Task Priority
        <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">Select</span>
            <span class="hljs-attr">defaultSelectValue</span>=<span class="hljs-string">{priority}</span>
            <span class="hljs-attr">selectOptions</span>=<span class="hljs-string">{priorityArray}</span>
            <span class="hljs-attr">handleSelectChange</span>=<span class="hljs-string">{(e)</span> =></span> setPriority(e.target.value)}
        />
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"flex flex-col mb-6"</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"mb-1"</span>></span>
            Task Due Date
        <span class="hljs-tag"></<span class="hljs-name">label</span>></span>
        <span class="hljs-tag"><<span class="hljs-name">input</span>
            <span class="hljs-attr">type</span>=<span class="hljs-string">"date"</span>
            <span class="hljs-attr">id</span>=<span class="hljs-string">"date"</span>
            <span class="hljs-attr">value</span>=<span class="hljs-string">{dueDate!.toISOString().split(</span>"<span class="hljs-attr">T</span>")[<span class="hljs-attr">0</span>]}
            <span class="hljs-attr">min</span>=<span class="hljs-string">{new</span> <span class="hljs-attr">Date</span>()<span class="hljs-attr">.toISOString</span>()<span class="hljs-attr">.split</span>("<span class="hljs-attr">T</span>")[<span class="hljs-attr">0</span>]}
            <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span> =></span> setDueDate(new Date(e.target.value))}
                className="bg-inherit border rounded-sm border-input p-2                                      focus:outline-none focus:ring-1 focus:ring-slate-                               900 invalid:focus:ring-red-600"
        />
    <span class="hljs-tag"></<span class="hljs-name">div</span>></span>
    <span class="hljs-tag"><<span class="hljs-name">Button</span>
        <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span>
        <span class="hljs-attr">disable</span>=<span class="hljs-string">{isSubmitting}</span>
        <span class="hljs-attr">extraBtnClasses</span>=<span class="hljs-string">"bg-primary justify-center text-white font-semibold px-4 py-2 outline-1 hover:bg-primaryHover focus:ring-1 focus:ring-pink-800 w-full"</span>
    ></span>
        <span class="hljs-tag"><<span class="hljs-name">span</span>></span>
            Add Task
        <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
    <span class="hljs-tag"></<span class="hljs-name">Button</span>></span>
<span class="hljs-tag"></<span class="hljs-name">form</span>></span></span>
);
</code></pre><p>Fix import errors and your application should now be validating title and description as well as creating the task then sending you to the "/tasks" route. You can check the Appwrite console to confirm that the task has been created. </p>
<h3 id="heading-how-set-up-read-and-delete-tasks">How Set Up Read and Delete Tasks</h3>
<p>Open the <strong>Task.jsx</strong> file in the routes folder within <strong>src</strong> folder, and add the following code above the <code>return</code> like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [tasks, setTasks] = useState<ITask[]>([]);
<span class="hljs-keyword">const</span> [tasksError, setTasksError] = useState(<span class="hljs-string">""</span>);

useEffect(<span class="hljs-function">() =></span> {
        getTasks()
        .then(<span class="hljs-function">(<span class="hljs-params">res</span>) =></span> {
        setTasks(res.reverse());
        })
        .catch(<span class="hljs-function">(<span class="hljs-params">err</span>) =></span> {
        <span class="hljs-built_in">console</span>.error(err);
        setTasksError(<span class="hljs-string">"Error fetching tasks, please try again"</span>);
        });
    }, []);

<span class="hljs-keyword">return</span> (
<span class="hljs-comment">//rest of code</span>
</code></pre>
<p>Here, the file is setting some local state using useState to hold the tasks and set any potential task related errors.</p>
<p>Now replace the code in the <code>return</code> with the following code:</p>
<pre><code class="lang-typescript">

<main className=<span class="hljs-string">"container mx-auto"</span>>
    <section className=<span class="hljs-string">"max-w-5xl mx-auto m-12 p-16"</span>>
        <h1 className=<span class="hljs-string">"text-4xl md:text-7xl font-bold text-center py-3 mb-16"</span>>
        Your Tasks
        </h1>
        {tasksError ? (
            <span className=<span class="hljs-string">"m-8 text-error"</span>>{tasksError}</span>
        ) : (
            <div className=<span class="hljs-string">"flex flex-col md:flex-row justify-between"</span>>
                <div className=<span class="hljs-string">"flex-1"</span>>
                    <h3 className=<span class="hljs-string">"text-2xl font-bold m-8"</span>>Pending Tasks</h3>
                    <div>
                         {tasks
                             .filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> !task.done)
                             .map(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> (
                                <TaskItem key={task.$id} task={task} />
                         ))}
                    </div>
                </div>
                <div className=<span class="hljs-string">"flex-1"</span>>
                    <h3 className=<span class="hljs-string">"text-2xl font-bold m-8"</span>>Completed Tasks</h3>
                    <div>
                        {tasks
                            .filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> task.done)
                            .map(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> (
                                <TaskItem key={task.$id} task={task} />
                        ))}
                    </div>
                </div>
            </div>
        )}
    </section>
</main>
</code></pre>
<p>You now need to create the <code>getTasks()</code> function and the <code>TaskItem</code> component. In the components folder, create a file called <strong>TaskItem.tsx</strong> and paste the following code in it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">interface</span> TaskItemProps {
    task: ITask;
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TaskItem</span>(<span class="hljs-params">{ task }: TaskItemProps</span>) </span>{
    <span class="hljs-keyword">return</span> (
    <>
        <div className=<span class="hljs-string">"m-8 cursor-pointer border border-container rounded-md p-4 hover:shadow-lg transition duration-300 ease-in-out max-h-96"</span>>
            <section
            key={task.$id}
            className=<span class="hljs-string">"flex flex-col justify-between gap-2 my-4 h-full"</span>
            >
            <section className=<span class="hljs-string">"flex gap-4 items-center justify-between flex-wrap"</span>>
                {task.priority && (
                <span>
                    <span className=<span class="hljs-string">"font-medium"</span>>Priority: </span>
                        <span
                            className={<span class="hljs-string">`<span class="hljs-subst">${
                            task.priority === <span class="hljs-string">"low"</span>
                            ? <span class="hljs-string">"bg-lowPriority text-iconColor"</span>
                            : task.priority === <span class="hljs-string">"medium"</span>
                            ? <span class="hljs-string">"bg-mediumPriority text-iconColor"</span>
                            : <span class="hljs-string">"bg-highPriority text-iconColor"</span>
                            }</span> py-1 px-2 rounded-md`</span>}
                        >
                            {task.priority}
                        </span>
                </span>
                )}
                <div className=<span class="hljs-string">"flex gap-2 py-1 ml-auto"</span>>
                    <Button
                        handleClick={<span class="hljs-function">() =></span> handleEdit(task)}
                        extraBtnClasses=<span class="hljs-string">"bg-ok"</span>
                    >
                        <span className=<span class="hljs-string">"font-medium"</span>>Edit</span>
                        <PencilSquareIcon height={<span class="hljs-number">25</span>} className=<span class="hljs-string">"hidden lg:flex"</span> />
                    </Button>
                    <Button
                        handleClick={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> handleDelete(e, task.$id)}
                        extraBtnClasses=<span class="hljs-string">"bg-highPriority"</span>
                    >
                        <span className=<span class="hljs-string">"font-medium"</span>>Delete</span>
                        <TrashIcon height={<span class="hljs-number">25</span>} className=<span class="hljs-string">"hidden lg:flex"</span> />
                    </Button>
                </div>
            </section>
            <section className=<span class="hljs-string">""</span>>
                <h2 className=<span class="hljs-string">"text-xl font-medium py-2 break-words"</span>>
                    {task.title}
                </h2>
                <p className=<span class="hljs-string">"py-1 mb-4 min-h-16 break-words"</span>>
                    {task.description.length > <span class="hljs-number">70</span>
                        ? task.description.substring(<span class="hljs-number">0</span>, <span class="hljs-number">70</span>) + <span class="hljs-string">"..."</span>
                        : task.description}
                </p>
                <span className=<span class="hljs-string">"font-extralight mt-2"</span>>
                    <span className=<span class="hljs-string">"font-medium"</span>>Due on: </span>
                        <span className=<span class="hljs-string">"underline"</span>>{<span class="hljs-string">`<span class="hljs-subst">${<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(
                            task.due_date
                        ).toLocaleDateString()}</span>`</span>}
                    </span>
                </span>
                </section>
                <section className=<span class="hljs-string">"flex justify-between"</span>>
                    {task.done ? (
                        <span className=<span class="hljs-string">"items-center text-ok font-bol ml-auto"</span>>
                            Completed
                        </span>
                    ) : (
                    <div className=<span class="hljs-string">"flex items-center ml-auto hover:scale-105 transition duration-300 ease-in-out"</span>>
                        <label htmlFor=<span class="hljs-string">"done"</span> className=<span class="hljs-string">"mr-2 font-light"</span>>
                            Mark <span class="hljs-keyword">as</span> complete
                        </label>
                        <input
                            <span class="hljs-keyword">type</span>=<span class="hljs-string">"checkbox"</span>
                            checked={isDone}
                            onClick={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> e.stopPropagation()}
                            onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {
                            setIsDone(e.target.checked);
                            handleCheckbox(task, task.$id, e);
                        }}
                            className=<span class="hljs-string">"size-5 accent-pink-600 rounded-sm"</span>
                    />
                </div>
                )}
                </section>
            </section>
        </div>
    </>
    );
}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> TaskItem;
</code></pre>
<p>This gives the file some markup to display. It divides the page into two columns, one for the pending tasks and one for the completed tasks, and it handles responsiveness of the page.</p>
<p>In order to get rid of the errors, paste the following code just before the <code>return</code> statement like so: </p>
<pre><code class="lang-typescript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TaskItem</span>(<span class="hljs-params">{ task }: TaskItemProps</span>) </span>{

<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> [isDone, setIsDone] = useState(<span class="hljs-literal">false</span>);

<span class="hljs-keyword">const</span> handleDelete = <span class="hljs-keyword">async</span> (
        currentTaskId: <span class="hljs-built_in">string</span>
    ) => {
        <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">await</span> deleteDocument(currentTaskId);
        } <span class="hljs-keyword">catch</span> (error) {
            <span class="hljs-built_in">console</span>.error(error);
        }
};

<span class="hljs-keyword">const</span> handleCheckbox = <span class="hljs-keyword">async</span> (
        currentTask: IPayload,
        id: <span class="hljs-built_in">string</span>,
        checkedVal: <span class="hljs-built_in">boolean</span>
    ) => {
        <span class="hljs-keyword">if</span> (!checkedVal) <span class="hljs-keyword">return</span>;

        <span class="hljs-keyword">const</span> payload: IPayload = {
        title: currentTask.title,
        description: currentTask.description,
        due_date: currentTask.due_date,
        priority: currentTask.priority,
        done: checkedVal,
        };

        <span class="hljs-keyword">try</span> {
            <span class="hljs-keyword">await</span> updateDocument(payload, id);
        } <span class="hljs-keyword">catch</span> (error) {
            <span class="hljs-built_in">console</span>.error(error);
        }
};

<span class="hljs-comment">//rest of code below untouched</span>
<span class="hljs-keyword">return</span> (
......
</code></pre>
<p>This adds the ability to delete a task item and the ability to mark it as complete. </p>
<p>Create a new file in the <strong>utils</strong> folder and call it <strong>shared.ts</strong>. This file will house any function that will be called in more than two places in the application. </p>
<p>The <code>getTasks</code> function is one such repetitive function, so it will be placed in the <strong>shared.ts</strong> file. Paste the following code into it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> { readDocuments } <span class="hljs-keyword">from</span> <span class="hljs-string">"./db"</span>;
<span class="hljs-keyword">import</span> { ITask } <span class="hljs-keyword">from</span> <span class="hljs-string">"../models/interface"</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> getTasks = <span class="hljs-keyword">async</span> () => {
    <span class="hljs-keyword">const</span> { documents } = <span class="hljs-keyword">await</span> readDocuments();

    <span class="hljs-keyword">return</span> documents <span class="hljs-keyword">as</span> ITask[];
};
</code></pre>
<p>This defines the function and returns an array of <code>ITasks</code>. Go back to the <strong>Task.tsx</strong> file and fix any import errors. </p>
<p>Run the application and you should see something like this:</p>
<p>
<em>your pending and completed tasks displayed in the browser</em></p>
<p>The task can be deleted or marked as complete but you won't see an update on the UI until the page is refreshed. To fix that, go back to the <strong>TaskItem</strong> file and paste the following code below the <code>isDone</code> useState and above the <code>handleDelete</code> function:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [isDone, setIsDone] = useState(<span class="hljs-literal">false</span>);

<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> updateTasks = <span class="hljs-keyword">async</span> () => {
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">const</span> allTasks = <span class="hljs-keyword">await</span> getTasks();
        <span class="hljs-keyword">if</span> (setTasks) setTasks(allTasks.reverse());
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-built_in">console</span>.error(error);
    }
};

<span class="hljs-comment">//rest of code below remains as is</span>
<span class="hljs-keyword">const</span> handleDelete = <span class="hljs-keyword">async</span> (
</code></pre>
<p>Update <code>TaskItem</code> props interface and the <code>TaskItem</code> function like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">interface</span> TaskItemProps {
    task: ITask;
    setTasks?: <span class="hljs-function">(<span class="hljs-params">tasks: ITask[]</span>) =></span> <span class="hljs-built_in">void</span>;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TaskItem</span>(<span class="hljs-params">{ task, setTasks }: TaskItemProps</span>) </span>{
<span class="hljs-comment">//rest of code below</span>
    <span class="hljs-keyword">const</span> [isDone, setIsDone] = useState(<span class="hljs-literal">false</span>);
</code></pre>
<p>This gives a setter function that resets the tasks array as a prop to the <code>TaskItem</code> component. </p>
<p>Adjust the <code>handleDelete</code> and <code>handleCheckbox</code> functions in the <code>TaskItem</code> component to include the <code>updateTasks</code> function you added above. it should read like this:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> handleDelete = <span class="hljs-keyword">async</span> (
    e: React.MouseEvent<HTMLButtonElement>,
    currentTaskId: <span class="hljs-built_in">string</span>
) => {
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">await</span> deleteDocument(currentTaskId);
        updateTasks();
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-built_in">console</span>.error(error);
    }
};

<span class="hljs-keyword">const</span> handleCheckbox = <span class="hljs-keyword">async</span> (
    currentTask: IPayload,
    id: <span class="hljs-built_in">string</span>,
    e: React.ChangeEvent<HTMLInputElement>
    ) => {

    <span class="hljs-keyword">const</span> payload: IPayload = {
        title: currentTask.title,
        description: currentTask.description,
        due_date: currentTask.due_date,
        priority: currentTask.priority,
        done: e.target.checked,
    };

    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">await</span> updateDocument(payload, id);
        updateTasks();
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-built_in">console</span>.error(error);
    }
};
</code></pre>
<p>Go back to the <strong>Task.tsx</strong> file and pass <code>setTasks</code> to the <code>TaskItem</code> component like so: <code><TaskItem key={task.$id} task={task} setTasks={setTasks} /></code>. Now, the UI updates without needing to manually refresh the page.</p>
<h3 id="heading-how-to-make-the-tasks-editable">How to Make the Tasks Editable</h3>
<p>In order to edit a task, you will need to pass a function to the edit button in the <code>TaskItem</code> component. </p>
<p>Paste the following code in the <strong>TaskItem.tsx</strong> file between the <code>updateTasks</code> and <code>handleDelete</code> functions like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-comment">//paste below updateTasks</span>
<span class="hljs-keyword">const</span> handleEdit = <span class="hljs-keyword">async</span> (
    currentTask: ITask
) => {
    navigate(<span class="hljs-string">"/"</span>, { state: { task: currentTask } });
};

<span class="hljs-comment">//rest of code untouched below</span>
</code></pre>
<p>Add this line right above the <code>isDone</code> useState: <code>const navigate = useNavigate();</code>. </p>
<p>In the same file, find the edit button and pass the <code>handleEdit</code> function to it. Also, wrap it in a condition that checks if the task is done such that the button is only displayed in the case that the task is not marked as complete. Like so:</p>
<pre><code class="lang-typescript">{!task.done && (
    <Button
        handleClick={<span class="hljs-function">() =></span> handleEdit(task)}
        extraBtnClasses=<span class="hljs-string">"bg-ok"</span>
    >
        <span className=<span class="hljs-string">"font-medium"</span>>Edit</span>
        <PencilSquareIcon height={<span class="hljs-number">25</span>} className=<span class="hljs-string">"hidden lg:flex"</span> />
    </Button>
)
</code></pre>
<p>The <code>AddTask</code> component has to be adjusted to handle editing a task and the <strong>Index.tsx</strong> file needs to be updated to handle the task to be edited being passed to it via the navigate <code>handleEdit</code> function.</p>
<p>First, go to the <strong>AddTask</strong> file and add some prop definitions directly below the import statements, then pass the new props to the component like so:</p>
<pre><code class="lang-typescript"><span class="hljs-keyword">import</span>....

<span class="hljs-comment">// pass a task and an isEdit boolean</span>
<span class="hljs-comment">// if isEdit is true, then the form will be populated with the task's data</span>
<span class="hljs-keyword">interface</span> ITaskFormProps {
    task: ITask | <span class="hljs-literal">null</span>;
    isEdit?: <span class="hljs-built_in">boolean</span>;
    setTasks?: <span class="hljs-function">(<span class="hljs-params">tasks: ITask[]</span>) =></span> <span class="hljs-built_in">void</span>;
}

<span class="hljs-comment">//pass component props</span>
<span class="hljs-keyword">const</span> AddTask = <span class="hljs-function">(<span class="hljs-params">{ task, isEdit, setTasks }: ITaskFormProps</span>) =></span> {
<span class="hljs-comment">//code untouched below</span>
</code></pre>
<p>Adjust the due date and priority useStates to read like below:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [dueDate, setDueDate] = useState(
    isEdit && task?.due_date ? <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(task.due_date) : <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()
);

<span class="hljs-keyword">const</span> [priority, setPriority] = useState(
    isEdit && task?.priority ? task?.priority : priorityArray[<span class="hljs-number">0</span>]
);
</code></pre>
<p>Add a useEffect below the useStates like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [titleValidationError, setTitleValidationError] = useState(<span class="hljs-string">""</span>);

<span class="hljs-comment">//paste below useState statements</span>
useEffect(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">if</span> (isEdit && task) {
        setTitleVal(task.title);
        setTextAreaVal(task.description);
    } <span class="hljs-keyword">else</span> {
        setTitleVal(<span class="hljs-string">""</span>);
    }
}, [isEdit, task]);
</code></pre>
<p>In the <code>handleSubmit</code> function within the same <strong>AddTask</strong> file, delete this line: <code>await createDocument(payload);</code> and replace with the below:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">if</span> (isEdit && task) {
    <span class="hljs-keyword">await</span> updateDocument(payload, task!.$id);
    <span class="hljs-keyword">const</span> allTasks = <span class="hljs-keyword">await</span> getTasks();
    <span class="hljs-keyword">if</span> (setTasks) <span class="hljs-keyword">return</span> setTasks(allTasks.reverse());
} <span class="hljs-keyword">else</span> {
    <span class="hljs-keyword">await</span> createDocument(payload);
}
</code></pre>
<p>Now replace the <code>Button</code> component at the bottom of the file just above the form closing tag with this:</p>
<pre><code class="lang-typescript">
<Button
    <span class="hljs-keyword">type</span>=<span class="hljs-string">"submit"</span>
    disable={isSubmitting}
    extraBtnClasses=<span class="hljs-string">"bg-primary justify-center text-white font-semibold px-4 py-2 outline-1 hover:bg-primaryHover focus:ring-1 focus:ring-pink-800 w-full"</span>
>
    <span>
        {isSubmitting ? <span class="hljs-string">"Submitting..."</span> : task ? <span class="hljs-string">"Edit Task"</span> : <span class="hljs-string">"Add Task"</span>}
    </span>
</Button>
<span class="hljs-comment">//unchanged code below</span>
</form>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> AddTask;
</code></pre>
<p>This sets the text on the button depending on whether the form is submitting, creating a new task or updating an exisiting task.</p>
<p>Go to the <strong>Index.tsx</strong> file in the <strong>routes</strong> folder and paste the following above the <code>return</code> statement:</p>
<pre><code class="lang-typescript"><span class="hljs-keyword">const</span> Index = <span class="hljs-function">() =></span> {
    <span class="hljs-comment">//paste here</span>
    <span class="hljs-keyword">const</span> location = useLocation();
    <span class="hljs-keyword">const</span> navigate = useNavigate();

    <span class="hljs-keyword">const</span> taskFromState: ITask = location.state?.task;

    <span class="hljs-keyword">const</span> [taskToEdit] = useState<ITask | <span class="hljs-literal">null</span>>(taskFromState ?? <span class="hljs-literal">null</span>);

    useEffect(<span class="hljs-function">() =></span> {
        <span class="hljs-keyword">if</span> (taskFromState) {
            navigate(location.pathname, {});
        }
    }, [taskFromState, location.pathname, navigate]);

    <span class="hljs-comment">//below code remains unchanged</span>
    <span class="hljs-keyword">return</span> (....
</code></pre>
<p>Here, the file gets the task passed to it from the "/tasks" route and sets it to local state. Then the useEffect nullies the passed task so that the form is reset on refresh.</p>
<p>In the <strong>Index.tsx</strong> file replace the <code>AddTask</code> component with this line: <code><AddTask task={taskToEdit} isEdit={taskToEdit ? true : false} /></code>.</p>
<p>Run your application and you should be able to click on the edit button, be navigated back to the "/" route, have the form pre-filled with the task details, be able to edit some of the fields and be redirected back to "/tasks" once you click on the "Edit Task" button. </p>
<h3 id="heading-how-to-enable-viewing-of-tasks">How to Enable Viewing of Tasks</h3>
<p>The application now creates, reads, updates and deletes tasks. All that is left on that is the ability to view a particular task. </p>
<p>Go to the <strong>TaskItem</strong> file, add the following to the interface <code>TaskItemProps</code>: <code>isViewTask: boolean;    handleViewTask?: (e: React.MouseEvent<HTMLDivElement>) => void;</code>.</p>
<p>Add them as props to the <code>TaskItem</code> component and set <code>isViewTask</code> to a default of <code>false</code> like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">TaskItem</span>(<span class="hljs-params">{
    task,
    setTasks,
    isViewTask = <span class="hljs-literal">false</span>,
    handleViewTask,
}: TaskItemProps</span>) </span>{    
    <span class="hljs-comment">//rest of code below unchanged</span>
    <span class="hljs-keyword">const</span> navigate = useNavigate();
</code></pre>
<p>Replace the paragraph tag that displays the task description within the <code>return</code> of the component with this markup:</p>
<pre><code class="lang-typescript">
<p className=<span class="hljs-string">"py-1 mb-4 min-h-16 break-words"</span>>
    {task.description.length > <span class="hljs-number">70</span> && !isViewTask
        ? task.description.substring(<span class="hljs-number">0</span>, <span class="hljs-number">70</span>) + <span class="hljs-string">"..."</span>
        : task.description
    }
</p>
</code></pre>
<p>The change introduced will ensure that the full description is visible if <code>isViewTask</code> is set to <code>true</code>.</p>
<p>On the <code>div</code> tag just below the <code>return</code> in the same component, add an <code>onClick</code> handler like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">return</span> (
<>
    <div
        className=<span class="hljs-string">"m-8 cursor-pointer border border-container rounded-md p-4                        hover:shadow-lg transition duration-300 ease-in-out max-h-                       96"</span>
        onClick={handleViewTask}
    >
<span class="hljs-comment">//rest unchanged code</span>
...
</code></pre>
<p>Back in the <strong>Task.tsx</strong> file, paste the following just above the useEffect:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> handleViewTask = <span class="hljs-function">(<span class="hljs-params">
    e: React.MouseEvent<HTMLDivElement>,
    activeTask: ITask
</span>) =></span> {
    setIsViewTask(<span class="hljs-literal">true</span>);
    setSelectedTask(activeTask);
};

<span class="hljs-comment">//unchanged code below</span>
useEffect(...
</code></pre>
<p>Add the following useState functions above the <code>handleViewTask</code> function, below the other useStates:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [tasksError, setTasksError] = useState(<span class="hljs-string">""</span>);
<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> [isViewTask, setIsViewTask] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> [selectedTask, setSelectedTask] = useState<ITask>();

<span class="hljs-comment">//code below unchanged</span>
<span class="hljs-keyword">const</span> handleViewTask = (...
</code></pre>
<p>Now paste the following code within the <code>return</code> statement in the same file, just above the <code>h1</code> tag displaying "Your Tasks" text:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">return</span> (
<main className=<span class="hljs-string">"container mx-auto"</span>>
    <section className=<span class="hljs-string">"max-w-5xl mx-auto m-12 p-16"</span>>
        <span class="hljs-comment">//paste here</span>
        {isViewTask && selectedTask && (
            <Dialog key={selectedTask.$id} setIsViewTask={setIsViewTask}>
                <TaskItem
                    task={selectedTask}
                    handleViewTask={<span class="hljs-function">() =></span> handleViewTask(selectedTask!)}
                    isViewTask={isViewTask}
                />
            </Dialog>
        )}
        <h1 className=<span class="hljs-string">"text-4xl md:text-7xl font-bold text-center py-3 mb-16"</span>>
        Your Tasks
        </h1>
        <span class="hljs-comment">//rest of code below remains unchanged</span>
</code></pre>
<p>You will need to create the Dialog component. Create a new file in the components folder and call it <strong>Dialog.tsx</strong>, then paste the following in it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> { XMarkIcon } <span class="hljs-keyword">from</span> <span class="hljs-string">"@heroicons/react/24/solid"</span>;
<span class="hljs-keyword">import</span> { ReactNode, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { ITask } <span class="hljs-keyword">from</span> <span class="hljs-string">"../models/interface"</span>;
<span class="hljs-keyword">import</span> Button <span class="hljs-keyword">from</span> <span class="hljs-string">"./Button"</span>;

<span class="hljs-keyword">interface</span> DialogProps {
    setIsViewTask?: <span class="hljs-function">(<span class="hljs-params">isViewTask: <span class="hljs-built_in">boolean</span></span>) =></span> <span class="hljs-built_in">void</span>;
    children: ReactNode;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Dialog</span>(<span class="hljs-params">{ setIsViewTask, children }: DialogProps</span>) </span>{
    <span class="hljs-keyword">const</span> [isOpen, setIsOpen] = useState(<span class="hljs-literal">true</span>);

    <span class="hljs-keyword">const</span> closeModal = <span class="hljs-function">() =></span> {
        <span class="hljs-keyword">if</span> (setIsViewTask) setIsViewTask(<span class="hljs-literal">false</span>);
        setIsOpen(<span class="hljs-literal">false</span>);
    };
    <span class="hljs-keyword">return</span> (
        <dialog
            open={isOpen}
            id=<span class="hljs-string">"modal"</span>
            style={{
            backgroundColor: <span class="hljs-string">"var(--base-bg)"</span>,
            color: <span class="hljs-string">"var(--text-main)"</span>,
            }}
            className={<span class="hljs-string">`<span class="hljs-subst">${
                isOpen ? <span class="hljs-string">"opacity-100"</span> : <span class="hljs-string">"opacity-0 pointer-events-none"</span>
                }</span> transition-opacity duration-300 ease-in-out fixed inset-0                      backdrop-filter backdrop-blur-md backdrop-brightness-50 w-4/6                      border border-container rounded-md max-h-[80vh] overflow-y-auto                 text-main`</span>}
        >
        <Button
            handleClick={closeModal}
            content={{ text: <span class="hljs-string">"Close"</span>, icon: XMarkIcon }}
            extraBtnClasses=<span class="hljs-string">"ml-auto text-main font-medium hover:text-error"</span>
        />
        <div className=<span class="hljs-string">"max-h-[80vh] overflow-y-auto"</span>>{children}</div>
        </dialog>
    );
    }

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Dialog;
</code></pre>
<p>Here, the file defined a <code>Dialog</code> component that takes in some props, displays a button and the children it receives from props. </p>
<p>Finally, replace the two <code>TaskItem</code> components in the <code>tasks.filter...</code> function within the return statement of the <strong>Task.tsx</strong> file with the following:</p>
<pre><code class="lang-typescript">
{tasks
    .filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> !task.done)
    .map(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> (
        <TaskItem
            key={task.$id}
            task={task}
            setTasks={setTasks}
            handleViewTask={<span class="hljs-function">() =></span> handleViewTask(task)}
            isViewTask={isViewTask}
        />
))}
</code></pre>
<p>You should be able to click on the task items and have the dialog pop up with the details of the task. </p>
<p>However, if you try to delete the item you will notice that it opens the dialog while deleting it. To fix that, adjust the <code>handleDelete</code> function in the <strong>TaskItem.tsx</strong> file to read like this: </p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> handleDelete = <span class="hljs-keyword">async</span> (
    e: React.MouseEvent<HTMLButtonElement>,
    currentTaskId: <span class="hljs-built_in">string</span>
) => {
    e.stopPropagation();
    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">await</span> deleteDocument(currentTaskId);
        <span class="hljs-keyword">if</span> (isViewTask) {
            navigate(<span class="hljs-number">0</span>);
        } <span class="hljs-keyword">else</span> {
            updateTasks();
        }
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-built_in">console</span>.error(error);
    }
};
</code></pre>
<p>You've added <code>e.stopPropagation()</code> to stop the event from bubbling up to the parent and potentially interfering with the click to open the dialog. </p>
<p>You've also added a check after deleting the task to see if the task is being viewed, in which case we refresh the page via the <code>navigate(0)</code> to force the UI to update to the proper state. If not, it proceeds to call <code>updateTasks()</code> to refresh the state.</p>
<p>You will notice the same issue when you try to mark the task as complete in which the dialog pops up. To fix this, adjust the checkbox input to include this line: <code>onClick={(e) => e.stopPropagation()}</code>. </p>
<p>The new line stops the event from bubbling up to the parent <code>div</code>. It is added to the <code>onClick</code> instead of the <code>onChange</code> because the event it is trying to intercept is of type <code>onClick</code>. The input should read like this:</p>
<pre><code class="lang-typescript">
<label htmlFor=<span class="hljs-string">"done"</span> className=<span class="hljs-string">"mr-2 font-light"</span>>
    Mark <span class="hljs-keyword">as</span> complete
</label>
<input
    <span class="hljs-keyword">type</span>=<span class="hljs-string">"checkbox"</span>
    checked={isDone}
    onClick={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> e.stopPropagation()}
    onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> {
    setIsDone(e.target.checked);
    handleCheckbox(task, task.$id, e);
    }}
    className=<span class="hljs-string">"size-5 accent-pink-600 rounded-sm"</span>
/>
</code></pre>
<p>At this point, the React application is responsive, can CRUD the Appwrite database and the user can view individual tasks. </p>
<h3 id="heading-how-to-auto-generate-descriptions-with-vercels-ai-sdk">How to Auto Generate Descriptions with Vercel's AI SDK</h3>
<p>To enhance the application and its' user experience, you can add the ability to auto generate descriptions for the tasks using AI. </p>
<p>To get started, open an integrated terminal and run the following command: <code>npm i ai</code>. This adds the <a target="_blank" href="https://vercel.com/blog/introducing-the-vercel-ai-sdk">Vercel AI SDK</a> to the React application. </p>
<p>Next, run this command in the terminal: <code>npm i @huggingface/inference</code> to add Hugging Face support. The application will use <a target="_blank" href="https://sdk.vercel.ai/docs/guides/providers/huggingface">Hugging Face</a> because you need to pay to get programmatic access to OpenAI.</p>
<p>Create a new file in the utils folder, call it <strong>ai.ts</strong> and paste the following in it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> { HfInference } <span class="hljs-keyword">from</span> <span class="hljs-string">"@huggingface/inference"</span>;
<span class="hljs-keyword">import</span> { HuggingFaceStream, StreamingTextResponse } <span class="hljs-keyword">from</span> <span class="hljs-string">"ai"</span>;

<span class="hljs-comment">// Create a new HuggingFace Inference instance</span>
<span class="hljs-keyword">const</span> Hf = <span class="hljs-keyword">new</span> HfInference(<span class="hljs-keyword">import</span>.meta.env.VITE_HUGGINGFACE_KEY);

<span class="hljs-comment">// IMPORTANT! Set the runtime to edge</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> runtime = <span class="hljs-string">"edge"</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> callAI = <span class="hljs-keyword">async</span> (prompt: <span class="hljs-built_in">string</span>) => {
    <span class="hljs-keyword">const</span> response = Hf.textGenerationStream({
        model: <span class="hljs-string">"OpenAssistant/oasst-sft-4-pythia-12b-epoch-3.5"</span>,
        inputs: <span class="hljs-string">`<|prompter|><span class="hljs-subst">${prompt}</span><|endoftext|><|assistant|>`</span>,
        parameters: {
            max_new_tokens: <span class="hljs-number">150</span>,
            <span class="hljs-comment">// @ts-ignore</span>
            typical_p: <span class="hljs-number">0.2</span>,
            repetition_penalty: <span class="hljs-number">1</span>,
            truncate: <span class="hljs-number">1000</span>,
            return_full_text: <span class="hljs-literal">false</span>,
        },
    });

    <span class="hljs-comment">// Convert the response into a friendly text-stream</span>
    <span class="hljs-keyword">const</span> stream = HuggingFaceStream(response);

    <span class="hljs-comment">// Respond with the stream</span>
    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> StreamingTextResponse(stream);
};
</code></pre>
<p>This boilerplate creates an instance of Hugging Face, creates a function that takes in a prompt, passes that prompt to the <code>textGenerationStream</code> function. Then it converts the response to a stream and to a text stream. </p>
<p>You will need to add a Hugging Face access token. You can genrate one at this <a target="_blank" href="https://huggingface.co/settings/tokens">address</a>. You will need an account before you can access it. </p>
<p>Once you have token, open the env file and add to it the following line</p>
<pre><code class="lang-env">
//replace with your actual token
VITE_HUGGINGFACE_KEY=YOUR-HF-ACCESS-TOKEN
</code></pre>
<p>Open the <strong>AddTask.tsx</strong> file and paste the following button just above the closing div tag of the <code>div</code> containing the textarea input:</p>
<pre><code class="lang-typescript">
{textAreaVal.length > <span class="hljs-number">197</span> && (
    <span className=<span class="hljs-string">"text-error mt-1"</span>>
        Warning description getting too long. Can only be <span class="hljs-number">200</span> characters
    </span>
)}
<span class="hljs-comment">//paste here</span>
<Button
    handleClick={generateDesc}
    disable={isGenerating}
    extraBtnClasses=<span class="hljs-string">"bg-light mt-2 w-fit ml-auto"</span>
>
    <span>Generate description</span>
    <SparklesIcon height={<span class="hljs-number">20</span>} />
</Button>
<span class="hljs-comment">//rest of below code unchanged</span>
</div>
</code></pre>
<p>Define <code>generateDesc</code> function just above the <code>return</code> statement in the <strong>AddTask</strong> file like so:</p>
<pre><code>
<span class="hljs-keyword">const</span> generateDesc = <span class="hljs-keyword">async</span> () => {
    setTextAreaVal(<span class="hljs-string">""</span>);

    <span class="hljs-keyword">if</span> (!titleVal) {
    alert(<span class="hljs-string">"Please provide a title for the task"</span>);
    <span class="hljs-keyword">return</span>;
    }

    setIsGenerating(<span class="hljs-literal">true</span>);

    <span class="hljs-keyword">const</span> prompt = <span class="hljs-string">`Provide a description for this task: <span class="hljs-subst">${titleVal}</span>. Keep the description to a maximum of 30 words`</span>;

    <span class="hljs-keyword">try</span> {
        <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> callAI(prompt);
        <span class="hljs-keyword">const</span> responseText = <span class="hljs-keyword">await</span> res.text();

        setIsGenerating(<span class="hljs-literal">false</span>);

        <span class="hljs-comment">//create a typing effect</span>
        responseText.split(<span class="hljs-string">""</span>).forEach(<span class="hljs-function">(<span class="hljs-params">char, index</span>) =></span> {
        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {
        setTextAreaVal(<span class="hljs-function">(<span class="hljs-params">prevText</span>) =></span> prevText + char);
        }, index * <span class="hljs-number">32</span>);
        });
    } <span class="hljs-keyword">catch</span> (error) {
        <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"ERROR HUGGING FACE API: "</span> + error);
    }
};
</code></pre><p>The function checks that the title is not empty and uses the title to create a prompt to pass on the Hugging Face helper. The response from the call is saved to local state. A simple typing effect is created as the textarea is populated with the response. </p>
<p>Next, add this useState: <code>const [isGenerating, setIsGenerating] = useState(false);</code> to the other useStates in the <code>AddTask</code> component.</p>
<p>Replace the textarea input in the same component with the following:</p>
<pre><code class="lang-typescript">
<textarea
    id=<span class="hljs-string">"description"</span>
    placeholder=<span class="hljs-string">"Describe your task"</span>
    maxLength={<span class="hljs-number">200</span>}
    value={isGenerating ? <span class="hljs-string">"generating..."</span> : textAreaVal}
    onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> setTextAreaVal(e.target.value)}
    className={<span class="hljs-string">`bg-inherit border rounded-sm p-2 h-32 resize-none          focus:outline-none focus:ring-1 <span class="hljs-subst">${
    textAreaVal.length > <span class="hljs-number">197</span>
    ? <span class="hljs-string">"border-error focus:ring-red-500 invalid:focus:ring-red-600"</span>
    : <span class="hljs-string">"border-input focus:ring-slate-900"</span>
    }</span>`</span>}
/>
</code></pre>
<p>On checking the application, you should see the button and be able to generate a description for the title of a task as below:</p>
<p>
<em>ai-enhanced task description</em></p>
<h3 id="heading-voice-enable-the-application-with-the-react-speech-recognition-package">Voice-enable the Application with the React Speech Recognition Package</h3>
<p>First, you need to add the dependency and its Typescript helper by running the following commands in an integrated terminal window: <code>npm i react-speech-recognition</code> and <code>npm i @types/react-speech-recognition</code>. </p>
<p>Additionally, run the following command to get the dependency to work properly: <code>npm i regenerator-runtime</code>.</p>
<p>Create a <strong>hooks</strong> folder within the <strong>src</strong> folder. Create a file within it called <strong>useSpeechToTextHelper.ts</strong> and paste the following in it:</p>
<pre><code class="lang-typeacript">
import "regenerator-runtime/runtime";
import { useState } from "react";
import { useSpeechRecognition } from "react-speech-recognition";

export function useSpeechToTextHelper() {
    const [error, setError] = useState("");

    const {
        transcript,
        listening,
        resetTranscript,
        browserSupportsSpeechRecognition,
    } = useSpeechRecognition();

    if (!browserSupportsSpeechRecognition) {
        setError("Browser doesn't support speech recognition.");
    }

    return {
        error,
        listening,
        transcript,
        resetTranscript,
    };
}
</code></pre>
<p>This hook exposes some built in helper functions from React Speech Recognition, handles the case that the browser does not support the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition">relevant web APIs</a> and returns some of that data.</p>
<p>Create a new file in the components folder called <strong>Speaker.tsx</strong>. Paste the following code into it:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">import</span> { useSpeechToTextHelper } <span class="hljs-keyword">from</span> <span class="hljs-string">"../hooks/useSpeechToTextHelper"</span>;
<span class="hljs-keyword">import</span> { MicrophoneIcon, XCircleIcon } <span class="hljs-keyword">from</span> <span class="hljs-string">"@heroicons/react/24/solid"</span>;
<span class="hljs-keyword">import</span> Button <span class="hljs-keyword">from</span> <span class="hljs-string">"./Button"</span>;
<span class="hljs-keyword">import</span> SpeechRecognition <span class="hljs-keyword">from</span> <span class="hljs-string">"react-speech-recognition"</span>;

<span class="hljs-keyword">interface</span> SpeakerProps {
handleClear: <span class="hljs-function">(<span class="hljs-params">e: React.MouseEvent<HTMLButtonElement></span>) =></span> <span class="hljs-built_in">void</span>;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Speaker</span>(<span class="hljs-params">{ handleClear }: SpeakerProps</span>) </span>{
    <span class="hljs-keyword">const</span> { listening, error } = useSpeechToTextHelper();

    <span class="hljs-keyword">const</span> handleSpeech = <span class="hljs-function">() =></span> {
        SpeechRecognition.startListening();
    };

    <span class="hljs-keyword">return</span> (
    <div>
        {error && <div>{error}</div>}
        <div className=<span class="hljs-string">"flex gap-2 py-1 items-center text-center justify-center"</span>>
            <span className=<span class="hljs-string">"font-medium"</span>>{listening ? <span class="hljs-string">"Mic on"</span> : <span class="hljs-string">"Mic off"</span>}</span>
            <Button
                handleClick={handleSpeech}
                extraBtnClasses=<span class="hljs-string">"bg-lightOk"</span>
                title=<span class="hljs-string">"Start"</span>
            >
                <MicrophoneIcon height={<span class="hljs-number">25</span>} />
            </Button>
            <Button
                handleClick={handleClear}
                extraBtnClasses=<span class="hljs-string">"bg-light"</span>
                <span class="hljs-keyword">type</span>=<span class="hljs-string">"reset"</span>
                title=<span class="hljs-string">"Reset"</span>
            >
                <XCircleIcon height={<span class="hljs-number">25</span>} />
            </Button>
        </div>
    </div>
    );
}

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Speaker;
</code></pre>
<p>This components accepts a function to clear the voice input as a prop, uses the helper hook, defines a function to handle the actual speech, handles potential error state and displays a button for handling the speech and another for clearing the voice transcript.</p>
<p>In the <strong>AddTask</strong> file, delete the label for title and replace it with the following markup:</p>
<pre><code class="lang-typescript">
<div className=<span class="hljs-string">"flex flex-row justify-between items-center"</span>>
    <label htmlFor=<span class="hljs-string">"title"</span>>Task Title</label>
    <Speaker handleClear={clearTranscript} />
</div>
</code></pre>
<p>This adds the <code>Speaker</code> component and wraps both the label and the <code>Speaker</code> component in a representational <code>div</code> in order to maintain the form layout. </p>
<p>Add the <code>clearTranscript</code> function just above the <code>handleSubmit</code> function like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> handleTitleChange = <span class="hljs-function">(<span class="hljs-params">e: React.ChangeEvent<HTMLInputElement></span>) =></span> {
    setTitleVal(e.target.value);

    <span class="hljs-keyword">if</span> (e.target.value.trim() !== <span class="hljs-string">""</span>) {
        setTitleValidationError(<span class="hljs-string">""</span>);
    }
};

<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> clearTranscript = <span class="hljs-function">() =></span> {
    resetTranscript();
};
<span class="hljs-comment">//below code is unchanged</span>
<span class="hljs-keyword">const</span> handleSubmitTask = asyc....
</code></pre>
<p>Next in the same <code>AddTask</code> component, add the following:</p>
<pre><code>
<span class="hljs-keyword">const</span> AddTask = <span class="hljs-function">(<span class="hljs-params">{ task, isEdit, setTasks }: ITaskFormProps</span>) =></span> {
    <span class="hljs-keyword">const</span> navigate = useNavigate();
    <span class="hljs-comment">//paste here</span>
    <span class="hljs-keyword">const</span> { transcript, resetTranscript } = useSpeechToTextHelper();
    <span class="hljs-comment">//rest remains unchanged</span>
</code></pre><p>Replace the useEffect in the file with this new one:</p>
<pre><code class="lang-typescript">
useEffect(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">if</span> (isEdit && task && !transcript) {
        setTitleVal(task.title);
        setTextAreaVal(task.description);
    } <span class="hljs-keyword">else</span> {
        setTitleVal(transcript || <span class="hljs-string">""</span>);
    }
}, [isEdit, task, transcript]);
</code></pre>
<p>Your application should now support creating titles for the tasks via voice inputs. And should look something like this:</p>
<p>
<em>voice input functionality added to the form</em></p>
<h3 id="heading-how-to-add-search-functionality-to-the-application">How to Add Search Functionality to the Application</h3>
<p>To increase ease of use, it is useful to have some search functionality in the application. </p>
<p>To start, open up the Appwrite console. Click into your collections, click on Indexes tab then click on the "Create index" button. </p>
<p>Leave the index key as is, select FullText in the index type dropdown. Add title attribute and create the index. Repeat the process for the description attribute.</p>
<p>In your application, open <strong>db.ts</strong> file in <strong>utils</strong> folder and paste the following function just above the <code>export</code> keyword, then add it to the list of exports:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> searchTasks = <span class="hljs-keyword">async</span> (searchTerm: <span class="hljs-built_in">string</span>) => {
    <span class="hljs-keyword">const</span> resTitle = <span class="hljs-keyword">await</span> databases.listDocuments(dbID, collectionID, [
                        Query.search(<span class="hljs-string">"title"</span>, searchTerm),
                    ]);
    <span class="hljs-keyword">const</span> resDesc = <span class="hljs-keyword">await</span> databases.listDocuments(dbID, collectionID, [
                        Query.search(<span class="hljs-string">"description"</span>, searchTerm),
                     ]);
    <span class="hljs-keyword">const</span> res = [...resTitle.documents, ...resDesc.documents];

    <span class="hljs-keyword">return</span> res;
};

<span class="hljs-keyword">export</span> {
    createDocument,
    readDocuments,
    updateDocument,
    deleteDocument,
    searchTasks,
};
</code></pre>
<p>Create a new file in the components folder, calll it <strong>Search.tsx</strong>. Paste the following into it:</p>
<pre><code class="lang-typescript"><span class="hljs-keyword">import</span> { FormEvent, useState } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { ITask } <span class="hljs-keyword">from</span> <span class="hljs-string">"../models/interface"</span>;
<span class="hljs-keyword">import</span> Dialog <span class="hljs-keyword">from</span> <span class="hljs-string">"./Dialog"</span>;
<span class="hljs-keyword">import</span> TaskItem <span class="hljs-keyword">from</span> <span class="hljs-string">"./TaskItem"</span>;
<span class="hljs-keyword">import</span> Button <span class="hljs-keyword">from</span> <span class="hljs-string">"./Button"</span>;
<span class="hljs-keyword">import</span> { searchTasks } <span class="hljs-keyword">from</span> <span class="hljs-string">"../utils/db"</span>;

<span class="hljs-keyword">const</span> Search = <span class="hljs-function">() =></span> {
<span class="hljs-keyword">const</span> [searchTerm, setSearchTerm] = useState(<span class="hljs-string">""</span>);
<span class="hljs-keyword">const</span> [isSearching, setIsSearching] = useState(<span class="hljs-literal">false</span>);
<span class="hljs-keyword">const</span> [searchedTasks, setSearchedTasks] = useState<ITask[]>([]);
<span class="hljs-keyword">const</span> [error, setError] = useState(<span class="hljs-string">""</span>);

    <span class="hljs-keyword">return</span> (
        <div className=<span class="hljs-string">"flex flex-col w-full md:w-1/2"</span>>
            <form
                className=<span class="hljs-string">"flex flex-col md:flex-row items-start md:items-center gap-2"</span>
                onSubmit={handleSubmit}
            >
                {searchedTasks.length > <span class="hljs-number">0</span> && (
                    <Dialog setSearchedTasks={setSearchedTasks}>
                        {searchedTasks.map(<span class="hljs-function">(<span class="hljs-params">task: ITask</span>) =></span> (
                            <TaskItem key={task.$id} task={task} isViewTask={<span class="hljs-literal">true</span>} />
                        ))}
                    </Dialog>
                )}
            <input
                aria-roledescription=<span class="hljs-string">"search"</span>
                <span class="hljs-keyword">type</span>=<span class="hljs-string">"text"</span>
                id=<span class="hljs-string">"search"</span>
                placeholder=<span class="hljs-string">"search your tasks..."</span>
                value={searchTerm}
                onChange={<span class="hljs-function">(<span class="hljs-params">e</span>) =></span> setSearchTerm(e.target.value)}
                className={<span class="hljs-string">`bg-inherit w-5/6 border rounded-md p-2 focus:outline-none focus:ring-1 <span class="hljs-subst">${
                error
                ? <span class="hljs-string">"border-error focus:ring-red-500 invalid:focus:ring-red-600"</span>
                : <span class="hljs-string">"border-input focus:ring-slate-900"</span>
                }</span>`</span>}
            />
            <Button
            <span class="hljs-keyword">type</span>=<span class="hljs-string">"submit"</span>
            extraBtnClasses=<span class="hljs-string">"bg-primary text-white hover:bg-primaryHover font-medium text-main py-2"</span>
            >
                <span>{isSearching ? <span class="hljs-string">"Searching..."</span> : <span class="hljs-string">"Search"</span>}</span>
            </Button>
            </form>
            <span className=<span class="hljs-string">"text-error font-medium mt-1"</span>>{error}</span>
        </div>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Search;
</code></pre>
<p>The new <code>Search</code> component creates some local state and returns a form with an input and search button. It also opens the dialog when it has search results.</p>
<p>Add this <code>handleSubmit</code> function above the <code>return</code> statement like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> handleSubmit = <span class="hljs-keyword">async</span> (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    <span class="hljs-keyword">if</span> (!searchTerm) {
        setError(<span class="hljs-string">"No search term entered"</span>);
        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {
        setError(<span class="hljs-string">""</span>);
        }, <span class="hljs-number">3000</span>);
        <span class="hljs-keyword">return</span>;
    }

    setIsSearching(<span class="hljs-literal">true</span>);

    <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> searchTasks(searchTerm);
    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"res search: "</span>, res);
    <span class="hljs-keyword">if</span> (res.length === <span class="hljs-number">0</span>) {
        setIsSearching(<span class="hljs-literal">false</span>);
        setError(<span class="hljs-string">"No task found"</span>);
        <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {
        setSearchTerm(<span class="hljs-string">""</span>);
        setError(<span class="hljs-string">""</span>);
        }, <span class="hljs-number">3000</span>);
        <span class="hljs-keyword">return</span>;
    }
    setIsSearching(<span class="hljs-literal">false</span>);
    setSearchedTasks(res <span class="hljs-keyword">as</span> ITask[]);
};
</code></pre>
<p>This function sets an error if no search term is received, then it attempts to call the database search function passing it the search term. If successful it sets the tasks to local state and if not, it catches the error.</p>
<p>Click into the dialog component and replace its props with the following, then pass the <code>setSearchedTasks</code> to it like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">interface</span> DialogProps {
    setIsViewTask?: <span class="hljs-function">(<span class="hljs-params">isViewTask: <span class="hljs-built_in">boolean</span></span>) =></span> <span class="hljs-built_in">void</span>;
    setSearchedTasks?: <span class="hljs-function">(<span class="hljs-params">tasks: ITask[]</span>) =></span> <span class="hljs-built_in">void</span>;
    children: ReactNode;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Dialog</span>(<span class="hljs-params">{ setIsViewTask, setSearchedTasks, children }: DialogProps</span>) </span>{...
</code></pre>
<p>Replace the <code>closeModal</code> function in the dialog component with this snippet:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> closeModal = <span class="hljs-function">() =></span> {
    <span class="hljs-keyword">if</span> (setIsViewTask) setIsViewTask(<span class="hljs-literal">false</span>);
    <span class="hljs-comment">//this is the new line</span>
    <span class="hljs-keyword">if</span> (setSearchedTasks) setSearchedTasks([]);
    setIsOpen(<span class="hljs-literal">false</span>);
};
</code></pre>
<p>Go back into the <strong>Task.tsx</strong> file and paste this below the <code>h1</code> tag that displays the "Your Tasks" text:</p>
<pre><code class="lang-typescript">
<h1 className=<span class="hljs-string">"text-4xl md:text-7xl font-bold text-center py-3 mb-16"</span>>
Your Tasks
</h1>
<span class="hljs-comment">//paste here</span>
<div className=<span class="hljs-string">"m-8 flex flex-col-reverse md:flex-row gap-8 items-start                     md:items-center md:justify-between"</span>>
    <Search />
    <Button
        handleClick={<span class="hljs-function">() =></span> navigate(<span class="hljs-string">"/"</span>)}
        extraBtnClasses=<span class="hljs-string">"bg-primary text-white font-medium py-2 hover:bg-    primaryHover ml-auto"</span>
    >
        <span>Add Task</span>
        <PlusIcon height={<span class="hljs-number">25</span>} className=<span class="hljs-string">"hidden md:flex"</span> />
    </Button>
</div>
<span class="hljs-comment">//rest of code stays unchanged</span>
</code></pre>
<p>This adds the search component and a button that takes you back to the Index page when clicked.</p>
<p>Add the following within the Task component just below the useStates:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> [selectedTask, setSelectedTask] = useState<ITask>();
<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> navigate = useNavigate();
<span class="hljs-comment">//all below remain unchanged</span>
<span class="hljs-keyword">const</span> handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>)
</code></pre>
<p>You can now test your search functionality. It works but has one bug: if the search term is present in the both the title and the description we get back two search results. </p>
<p>To fix that, modify the <code>searchTasks</code> function in <strong>db.ts</strong> to filter out duplicate tasks by IDs like so: </p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> searchTasks = <span class="hljs-keyword">async</span> (searchTerm: <span class="hljs-built_in">string</span>) => {
    <span class="hljs-keyword">const</span> resTitle = <span class="hljs-keyword">await</span> databases.listDocuments(dbID, collectionID, [
        Query.search(<span class="hljs-string">"title"</span>, searchTerm),
    ]);
    <span class="hljs-keyword">const</span> resDesc = <span class="hljs-keyword">await</span> databases.listDocuments(dbID, collectionID, [
        Query.search(<span class="hljs-string">"description"</span>, searchTerm),
    ]);

    <span class="hljs-keyword">const</span> res = [...resTitle.documents, ...resDesc.documents];

    <span class="hljs-comment">// remove duplicate tasks</span>
    <span class="hljs-keyword">const</span> uniqueRes = res.filter(
        <span class="hljs-function">(<span class="hljs-params">task, index, self</span>) =></span> index === self.findIndex(<span class="hljs-function">(<span class="hljs-params">t</span>) =></span> t.$id ===                  task.$id)
    );

    <span class="hljs-keyword">return</span> uniqueRes;
};
</code></pre>
<p>Now your search should work as expected and should look like this:</p>
<p>
<em>your pending and completed tasks displayed in the browser</em></p>
<h3 id="heading-how-to-add-ability-to-sort-tasks-via-due-date-and-priority">How to Add Ability to Sort Tasks via Due Date and Priority</h3>
<p>The application will only sort the pending tasks as it makes the most sense. It will sort by due date from the earliest date to the latest and vice versa. It will also sort by priority from lowest to highest and vice versa.</p>
<p>To get started, paste the following in the <strong>Tasks.tsx</strong> file right below the <code>h3</code> tag with the "Pending Tasks" text like so:</p>
<pre><code class="lang-typescript">
<h3 className=<span class="hljs-string">"text-2xl font-bold m-8"</span>>Pending Tasks</h3>
<span class="hljs-comment">//paste here</span>
<div className=<span class="hljs-string">"m-8 flex items-start lg:items-center gap-1 justify-between flex-col lg:flex-row"</span>>
    <span className=<span class="hljs-string">"font-medium"</span>>Sort Tasks by: </span>
    <Select
        defaultSelectValue={selectArray[<span class="hljs-number">0</span>]}
        handleSelectChange={handleSelectChange}
        selectOptions={selectArray}
    />
</div>
</code></pre>
<p>Then paste the following array that will contain the options for select component above. Paste it right above <code>handleViewTask</code> function like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> navigate = useNavigate();
<span class="hljs-comment">//paste here</span>
<span class="hljs-keyword">const</span> selectArray = [
    <span class="hljs-string">"priority - (low - high)"</span>,
    <span class="hljs-string">"priority - (high - low)"</span>,
    <span class="hljs-string">"due date - (earliest - latest)"</span>,
    <span class="hljs-string">"due date - (latest - earliest)"</span>,
];
<span class="hljs-comment">//rest remains unchanged</span>
<span class="hljs-keyword">const</span> handleViewTask = (...
</code></pre>
<p>Add the <code>handleSelectChange</code> and the sort functions above the <code>selectArray</code>, like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> sortByPriority = (tasksList: ITask[], isAsc: <span class="hljs-built_in">boolean</span>): ITask[] => {
    <span class="hljs-keyword">const</span> priorityOrder: { [key: <span class="hljs-built_in">string</span>]: <span class="hljs-built_in">number</span> } = {
    low: <span class="hljs-number">1</span>,
    medium: <span class="hljs-number">2</span>,
    high: <span class="hljs-number">3</span>,
    };

    <span class="hljs-keyword">return</span> [...tasksList].sort(<span class="hljs-function">(<span class="hljs-params">a, b</span>) =></span> {
    <span class="hljs-keyword">const</span> priorityA = priorityOrder[a.priority!.toLowerCase()];
    <span class="hljs-keyword">const</span> priorityB = priorityOrder[b.priority!.toLowerCase()];
    <span class="hljs-keyword">return</span> isAsc ? priorityA - priorityB : priorityB - priorityA;
    });
};

<span class="hljs-keyword">const</span> handleSelectChange = <span class="hljs-keyword">async</span> (
    e: React.ChangeEvent<HTMLSelectElement>
) => {
    <span class="hljs-keyword">const</span> selectedOption = e.target.value;
    <span class="hljs-keyword">const</span> doneTasks = tasks.filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span> task.done);

    <span class="hljs-keyword">switch</span> (selectedOption) {
        <span class="hljs-keyword">case</span> <span class="hljs-string">"priority - (low - high)"</span>:
        <span class="hljs-keyword">case</span> <span class="hljs-string">"priority - (high - low)"</span>: {
            <span class="hljs-keyword">const</span> isAsc = selectedOption === <span class="hljs-string">"priority - (low - high)"</span>;
            <span class="hljs-keyword">const</span> sortedTasks = sortByPriority(tasks, isAsc);
            setTasks([...doneTasks, ...sortedTasks.filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span>                           !task.done)]);
            <span class="hljs-keyword">break</span>;
        }
        <span class="hljs-keyword">case</span> <span class="hljs-string">"due date - (earliest - latest)"</span>:
        <span class="hljs-keyword">case</span> <span class="hljs-string">"due date - (latest - earliest)"</span>: {
            <span class="hljs-keyword">const</span> isEarliestToLatest =
            selectedOption === <span class="hljs-string">"due date - (earliest - latest)"</span>;
            <span class="hljs-keyword">const</span> dueDateResult = <span class="hljs-keyword">await</span> sortByDueDate(isEarliestToLatest);
            <span class="hljs-keyword">const</span> sortedTasks = dueDateResult.documents <span class="hljs-keyword">as</span> ITask[];
            setTasks([...doneTasks, ...sortedTasks.filter(<span class="hljs-function">(<span class="hljs-params">task</span>) =></span>                            !task.done)]);
            <span class="hljs-keyword">break</span>;
        }
        <span class="hljs-keyword">default</span>:
            <span class="hljs-keyword">break</span>;
        }
};

<span class="hljs-comment">//below remains unchanged</span>
<span class="hljs-keyword">const</span> selectArray = .....
</code></pre>
<p>The sortByPriority function creates an object whose keys map to the priority array and gives them numerical values. This makes it easier to sort as it is hard to tell which string is higher priority without that.</p>
<p>The <code>handleSelectChange</code> function picks out the selected option and filters the tasks to get the completed ones. It does matching logic in the switch statements, calling <code>sortByPriority</code> for the cases where the user is trying to do that and it calls <code>sortByDueDate</code> for the rest of the cases. </p>
<p><code>sortByDueDate</code> is defined in the <strong>db.ts</strong> file. Open it and paste the following at the bottom of the file above the exports. Then add it to the exports list like so:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> sortByDueDate = <span class="hljs-keyword">async</span> (isEarliestToLatest: <span class="hljs-built_in">boolean</span>) => {
    <span class="hljs-keyword">const</span> orderQuery = isEarliestToLatest
        ? Query.orderAsc(<span class="hljs-string">"due_date"</span>)
        : Query.orderDesc(<span class="hljs-string">"due_date"</span>);
    <span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> databases.listDocuments(dbID, collectionID,              [orderQuery]);
    <span class="hljs-keyword">return</span> res;
};

<span class="hljs-keyword">export</span> {
    createDocument,
    readDocuments,
    updateDocument,
    deleteDocument,
    searchTasks,
    sortByDueDate,
};
</code></pre>
<p>This function leverages Appwrites' Query methods to sort the date string according to the Boolean that is passed to it.</p>
<p>Going back to your application, run it to test the sorting functionality. The application should be sorted and the sorting should only apply to the pending tasks.</p>
<h3 id="heading-bonus-how-to-add-dark-mode-support">Bonus: How to Add Dark Mode Support</h3>
<p>The last thing left is to add Dark Mode support that respects the users' systems setting. </p>
<p>For this, open the <strong>tailwind.config.ts</strong> file and replace its contents with the following:</p>
<pre><code class="lang-typescript">
<span class="hljs-comment">/** @type {import('tailwindcss').Config} */</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    content: [<span class="hljs-string">"./index.html"</span>, <span class="hljs-string">"./src/**/*.{js,ts,jsx,tsx}"</span>],
    darkMode: <span class="hljs-string">"selector"</span>,
    theme: {
        extend: {
            textColor: {
                error: <span class="hljs-string">"var(--text-error)"</span>,
                ok: <span class="hljs-string">"var(--text-ok)"</span>,
                main: <span class="hljs-string">"var(--text-main)"</span>,
                iconColor: <span class="hljs-string">"var(--btn-icon-main)"</span>,
            },
            backgroundColor: {
                base: <span class="hljs-string">"var(--base-bg)"</span>,
                primary: <span class="hljs-string">"var(--btn-bg-primary)"</span>,
                primaryHover: <span class="hljs-string">"var(--btn-bg-primary-hover)"</span>,
                ok: <span class="hljs-string">"var(--btn-bg-ok)"</span>,
                lightOk: <span class="hljs-string">"var(--btn-bg-light-ok)"</span>,
                light: <span class="hljs-string">"var(--btn-bg-light)"</span>,
                lowPriority: <span class="hljs-string">"var(--low-priority)"</span>,
                mediumPriority: <span class="hljs-string">"var(--medium-priority)"</span>,
                highPriority: <span class="hljs-string">"var(--high-priority)"</span>,
            },
            borderColor: {
                container: <span class="hljs-string">"var(--border-container)"</span>,
                input: <span class="hljs-string">"var(--border-input)"</span>,
                error: <span class="hljs-string">"var(--border-error)"</span>,
            },
        },
    },
    plugins: [],
};
</code></pre>
<p>This extends the tailwind preset colors and ties the CSS variables that were set in the <strong>index.css</strong> file to the Tailwind config. </p>
<p>In the <strong>index.css</strong> file, add this dark class below the date class like so:</p>
<pre><code class="lang-css">
<span class="hljs-selector-id">#date</span><span class="hljs-selector-pseudo">::-webkit-calendar-picker-indicator</span> {
    <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--btn-bg-light); 
}
//<span class="hljs-selector-tag">paste</span> <span class="hljs-selector-tag">here</span>
<span class="hljs-selector-class">.dark</span>{
    <span class="hljs-attribute">--base-bg</span>: <span class="hljs-number">#262626</span>;
    <span class="hljs-attribute">--text-main</span>: <span class="hljs-number">#ffffff</span>;
    <span class="hljs-attribute">--text-error</span>: <span class="hljs-number">#fca5a5</span>;
    <span class="hljs-attribute">--text-ok</span>: <span class="hljs-number">#86efac</span>;
    <span class="hljs-attribute">--border-input</span>: <span class="hljs-number">#e2e8f0</span>;
    <span class="hljs-attribute">--border-error</span>: <span class="hljs-number">#fca5a5</span>;
}
</code></pre>
<p>This changes some of the CSS variables values when the dark class is applied.</p>
<p>Now, open the navbar file in the components folder and replace its contents with the following:</p>
<pre><code class="lang-typescript">
<span class="hljs-keyword">const</span> Navbar = <span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> navigate = useNavigate();

    <span class="hljs-keyword">const</span> themeArray = [<span class="hljs-string">"light"</span>, <span class="hljs-string">"dark"</span>, <span class="hljs-string">"system"</span>];
    <span class="hljs-keyword">const</span> [theme, setTheme] = useState(<span class="hljs-function">() =></span> {
        <span class="hljs-keyword">return</span> <span class="hljs-built_in">localStorage</span>.getItem(<span class="hljs-string">"theme"</span>) || themeArray[<span class="hljs-number">2</span>];
    });

    <span class="hljs-keyword">const</span> applyTheme = <span class="hljs-function">(<span class="hljs-params">selectedTheme: <span class="hljs-built_in">string</span></span>) =></span> {
        <span class="hljs-keyword">const</span> isDarkModePreferred = <span class="hljs-built_in">window</span>.matchMedia(
            <span class="hljs-string">"(prefers-color-scheme: dark)"</span>
            ).matches;

        <span class="hljs-built_in">document</span>.documentElement.classList.remove(<span class="hljs-string">"light"</span>, <span class="hljs-string">"dark"</span>);
        <span class="hljs-built_in">document</span>.documentElement.classList.add(selectedTheme);

        <span class="hljs-keyword">if</span> (selectedTheme === <span class="hljs-string">"system"</span>) {
        <span class="hljs-built_in">document</span>.documentElement.classList.toggle(<span class="hljs-string">"dark"</span>, isDarkModePreferred);
        <span class="hljs-built_in">document</span>.documentElement.classList.toggle(<span class="hljs-string">"light"</span>,                  !isDarkModePreferred);
        }
    };

    <span class="hljs-keyword">const</span> handleSelectTheme = <span class="hljs-function">(<span class="hljs-params">e: React.ChangeEvent<HTMLSelectElement></span>) =></span> {
        <span class="hljs-keyword">const</span> selectedTheme = e.target.value;
        setTheme(selectedTheme);

        <span class="hljs-comment">// Store the selected theme in localStorage</span>
        <span class="hljs-built_in">localStorage</span>.setItem(<span class="hljs-string">"theme"</span>, selectedTheme);
    };

    useEffect(<span class="hljs-function">() =></span> {
        applyTheme(theme);
    }, [theme]);

    <span class="hljs-keyword">return</span> (
        <nav className=<span class="hljs-string">"py-4 border-b-2 border-container shadow-md shadow-gray-400 w-full fixed top-0 bg-base"</span>>
            <ul className=<span class="hljs-string">"flex items-center justify-between  w-11/12 mx-auto"</span>>
                <Link to=<span class="hljs-string">"/"</span>>
                    <Button>
                        <span className=<span class="hljs-string">"font-semibold text-main"</span>>Taskwrite</span>
                        <PencilIcon height={<span class="hljs-number">20</span>} className=<span class="hljs-string">"text-main"</span> />
                    </Button>
                </Link>
                <div className=<span class="hljs-string">"flex items-center justify-between gap-6"</span>>
                <Link
                    to=<span class="hljs-string">"/tasks"</span>
                    className=<span class="hljs-string">"font-semibold hover:scale-105 transition duration-300 ease-in-out"</span>
                >
                    View Tasks
                </Link>
                <div className=<span class="hljs-string">"flex gap-2 items-center"</span>>
                    <span className=<span class="hljs-string">"font-semibold"</span>> Theme: </span>
                    <Select
                        defaultSelectValue={theme}
                        selectOptions={themeArray}
                        handleSelectChange={handleSelectTheme}
                    />
                </div>
                </div>
            </ul>
        </nav>
    );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> Navbar;
</code></pre>
<p>Your application should now have a select in the navigation menu that successfully toggles between dark and light themes while defaulting to the system preferences when set to "System". </p>
<p>It should look like so:</p>
<p>
<em>Taskwrite complete interface and functionalities</em></p>
<p>And Taskwrite is complete! You have successfully built a task manager application that is AI-enhanced, voice-enabled, searchable and sortable using React and Appwrite.</p>
<h2 id="heading-notes">Notes</h2>
<p>Appwrite recently announced some new features that would greatly simplify the search functionality above but, at the time of writing, these changes were not rolled out to their cloud offering. </p>
<p>The application could be further simplified by using state management solutions and this will be added to it in subsequent articles.</p>
<p>The application is live <a target="_blank" href="https://taskwrite.netlify.app/">here</a>.</p>
<h2 id="heading-limitations">Limitations</h2>
<p>The following are some known limitations and issues with this application:</p>
<ul>
<li>The navigation menu is not responsive</li>
<li>The application has no tests written</li>
<li>The permissions set for Appwrite are permissive and not recommended for production environments</li>
<li>The application could leverage <a target="_blank" href="https://appwrite.io/docs/apis/realtime">Appwrites' Realtime</a> capabilites for a smoother experience</li>
<li>The application could do with push notifications to remind the user when the task due date is coming up</li>
</ul>
<p>That said, the application is going to continue being improved and worked on. You can follow along with that on <a target="_blank" href="https://github.com/FatumaA/taskwrite">GitHub</a>. All contributions and improvements on the codebase are welcome. Please star the repository while you are at it.</p>
 
</article>
<article>
<h1> How to Set Up Authentication in Your Apps with Supabase Auth </h1>
<p>Fatuma Abdullahi — Mon, 29 Jan 2024 10:53:38 +0000</p>
 <p>In this article, you'll learn the basic key concepts that'll help you grasp how authentication and authorization work. </p>
<p>You'll start by learning what authentication and authorization are, and then learn how to implement authentication in your applications using Supabase auth.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
    <li>
        <a href="#prerequisites">
            Prerequisites
        </a>
    </li>
    <li>
        <a href="#what-is-authentication-and-authorization">
            What Is Authentication and Authorization?
        </a>
    </li>
    <li>
        <a href="#how-does-authentication-work">
            How Does Authentication Work?
        </a>
    </li>
    <li>
        <a href="#session-management-with-tokens-secrets-and-cookies">
            Session Management with Tokens, Secrets, and Cookies
        </a>
    </li>
    <li>
        <a href="#types-of-authentication-factors">
            Types of Authentication Factors
        </a>
    </li>
    <li>
        <a href="#common-authentication-strategies">
            Common Authentication Strategies
        </a>
        <ul>
            <li>
                <a href="#password-based-authentication">
                     Password-based Authentication
                </a>
            </li>
            <li>
                <a href="#password-less-authentication">
                     Password-less Authentication
                </a>
            </li>
            <li>
                <a href="#two-factor-authentication-2fa-">
                     Two-Factor Authentication (2FA)
                </a>
            </li>
            <li>
                <a href="#multi-factor-authentication-mfa-">
                     Multi-Factor Authentication (MFA)
                </a>
            </li>
              <li>
                <a href="#oauth-2-0-and-social-authentication">
                    OAuth 2.0 and Social Authentication
                </a>
            </li>
              <li>
                <a href="#sso-and-saml">
                    SSO and SAML
                </a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#authentication-and-security">
            Authentication and Security
        </a>
    </li>
    <li>
        <a href="#supabase-and-supabase-authentication-service">
            Supabase and Supabase Authentication Service
        </a>
    </li>
    <li>
        <a href="#how-to-use-supabase-auth">
            How to use Supabase Auth
        </a>
        <ul>
            <li>
                <a href="#the-api">
                    The API
                </a>
            </li>
            <li>
                <a href="#sdks">
                    SDKs
                </a>
            </li>
            <li>
                <a href="#auth-ui-helpers">
                    Auth UI Helpers
                </a>
            </li>
        </ul>

<p>    </p></li>
     <li>
         <a href="#summary">
             Summary
         </a>
    </li>
    <li>
        <a href="#resources">
            Resources
        </a>
    </li>
</ul><p></p>
<h2 id="heading-prerequisites">Prerequisites</h2>
<p>You'll need the following to make the most out of this article:</p>
<ul>
<li>Basic programming knowledge.</li>
<li><a target="_blank" href="https://supabase.com/">A Supabase project</a> to follow along.</li>
<li>And a text editor to try out the example code snippets.</li>
</ul>
<h2 id="heading-what-is-authentication-and-authorization">What Is Authentication and Authorization?</h2>
<p>In simple terms, authentication is the process of a user identifying themselves to a system and the system confirming that the user is who they claim to be.   </p>
<p>On the other hand, authorization is the process of the system determining which parts of the application the user is allowed to view or interact with, and which parts the user is not allowed to access. </p>
<h2 id="heading-how-does-authentication-work">How Does Authentication Work?</h2>
<p>
<em>A flowchart depicting the user authentication process</em></p>
<p>The first time a user interacts with a system, they will be requested to register. Typically, the user will provide a piece of information and a secret that is meant to be known only by them and the system. This is the registration part of the authentication process.</p>
<p>The next time the user interacts with the same system, they will be required to provide the identifying information along with the previously defined secret in order to verify their identity. </p>
<p>The device the user initiates the interaction from is the client and the system is the server. Once the system verifies the user, it sends over some information to the client about the user. </p>
<p>Because this process takes time and requires some action from the user, the client will store this information and send it back to the system whenever the user needs to access the system. This reduces friction by not requiring the user to actively re-authenticate every single time. This creates a user session.</p>
<h2 id="heading-session-management-with-tokens-secrets-and-cookies">Session Management with Tokens, Secrets, and Cookies</h2>
<p>
<em>A sequence diagram showing session management in a client-server architecture</em></p>
<p>The server can pass the user's information to the client in two ways – through tokens or session ids.</p>
<p>In the case of tokens, the server generates a signed token and passes it to the client. This token is typically a JWT and may contain information regarding the user. The client will store this token and send it back to the server every time the user makes a request. </p>
<p>The server is able to verify the integrity of the token because it signed it. This is referred to as stateless authentication because the token is self contained and the server does not need to store session data in a database or cache. </p>
<p>In the case of cookies, the server creates a record of the user session in a database or a cache that will include a session ID. The server send this session ID to the client.</p>
<p>The client stores this session ID in a cookie and sends it back to the server whenever the user makes a request. The session ID is a random string that acts as pointer to the actual user record in the database. </p>
<p>When the server receives this cookie, it matches the session ID it contains to its session records, and then matches that record to the user data in the database. This is referred to as stateful authentication because a database look-up is needed.</p>
<h2 id="heading-types-of-authentication-factors">Types of Authentication Factors</h2>
<p>An authentication factor refers to a type of credential that can be used to verify a user's identity. There are 3 factors typically used in the authentication process, and they are:</p>
<ol>
<li>Something you know: an examples is a password.</li>
<li>Something you have: an example is a token sent to your phone.</li>
<li>Something you are: an example is your fingerprint.</li>
</ol>
<h2 id="heading-common-authentication-strategies">Common Authentication Strategies</h2>
<p>Authentication strategies refer to the processes used to verify a user. Different types of authentication strategies include:</p>
<h3 id="heading-password-based-authentication">Password-based Authentication</h3>
<p>This refers to the traditional way of users identifying themselves by providing a text-based secret that is user defined. Typically, the system handles the entire process on its servers and is responsible for security and reliability.</p>
<h3 id="heading-password-less-authentication">Password-less Authentication</h3>
<p>In this approach, the system verifies the user’s identity without requiring user defined passwords. The system will, instead, generate a one time password (OTP) and send to the user. This OTP is then used in place of a password to gain access to the system. Examples include magic links, where the system sends a code to the user’s email.</p>
<h3 id="heading-two-factor-authentication-2fa">Two-Factor Authentication (2FA)</h3>
<p>The system attempts to verify the user is who they claim to be by requiring an extra piece of information after the primary authentication has checked out. </p>
<p>This can be an OTP sent to the user via email or SMS, or it can be by requiring the users' biometric information before the system grants access.</p>
<h3 id="heading-multi-factor-authentication-mfa">Multi-Factor Authentication (MFA)</h3>
<p>This is similar to 2FA, except that the system will use more than one extra method to verify the user’s identity. The extra methods or factors used in both MFA and 2FA are usually external to the system, such as an SMS requiring a phone.</p>
<h3 id="heading-oauth-20-and-social-authentication">OAuth 2.0 and Social Authentication</h3>
<p>OAuth is an authorization framework that allows clients to access information from an external server on the user's behalf. The external server prompts the user for permission to share the requested resources with the client. </p>
<p>After user permits the action, the external server issues an access token to the client. </p>
<p>The client then gives this access token to the original server, which verifies the token's validity and manages access to the requested resources. OAuth 2.0 is the latest version of OAuth and is the more widely used framework. </p>
<p>OAuth 2.0 extends support for non-browser based systems. Social Authentication is based on OAuth 2.0 but in this case, the external server that the client redirects the user to is typically a social media platform. This is the type of authentication process carried out whenever you see a "Continue with Twitter/X" button on an authentication page. </p>
<h3 id="heading-sso-and-saml">SSO and SAML</h3>
<p>SAML stands for Security Assertion Markup Language. It is a standard for passing authentication and authorization information between systems. One system acts as the requesting system or the service provider (SP) and the other system holds the requested information or acts as the Identity Provider (IdP). </p>
<p>On receiving this request, the identity provider will generate some statements in SAML form that contains some user information. The service provider then uses this information to decide how to handle the user in relation with its protected resources. </p>
<p>SSO refers to Single Sign On. This is an authentication strategy that lets users sign in through one system/application that then lets them access multiple applications within the same network. </p>
<p>This improves the user experience by not requiring the user to log in to different related applications. An example of this is Google workspace. You don't need to log into Docs separately if you are already logged into your Gmail account. SSO is facilitated by SAML as SAML provides a standard authentication mechanism and allows different systems to trust each other. </p>
<h2 id="heading-authentication-and-security">Authentication and Security</h2>
<p>Authentication involves handling, moving, and storing sensitive user information in relation to protected server resources. This makes security and best practices an important aspect of an authentication system.</p>
<p>There are some basic steps you can take to greatly increase the security of your authentication systems. These include:</p>
<ul>
<li>Enforcing stronger passwords.</li>
<li>Requiring the user to register an extra factor to enable 2FA.</li>
<li>Encrypting sensitive data as it is being transferred via HTTPS.</li>
<li>Storing passwords in an encrypted manner.</li>
<li>Using standard authentication frameworks like OAuth 2.0.</li>
</ul>
<p>There are certain compliances that your system should consider when handling sensitive user data beyond specific authentication information. This is even more so if operating in certain countries or handling enterprise applications. These compliances include:</p>
<ul>
<li><strong>GDPR</strong>: This compliance enforces standards around data handling including confidentiality and integrity.</li>
<li><strong>HIPAA</strong>: This compliance applies to medical data. It expects high levels of integrity.</li>
<li><strong>SOC</strong>: This is a framework more generally required of cloud technologies. It is based on the American Institute of CPAs and covers aspects of privacy, security, availability, integrity and confidentiality.</li>
</ul>
<p>Keeping all this in mind, you will find that it is often easier to use dedicated authentication services for your applications instead of rolling out your own auth.</p>
<p>There are lots of options for this, including dedicated authentication services such as Clerk and Auth0, and Backend-as-a-Service such as Supabase and Firebase. In this case, let's take a look at the Supabase authentication offering.</p>
<h2 id="heading-supabase-and-supabase-authentication-service">Supabase and Supabase Authentication Service</h2>
<p>Supabase is an open source Backend as a Service (BaaS) platform that makes developing a backend for your applications very easy and fast. It is based on open source technologies and actively supports the open source ecosystem. </p>
<p>Supabase offers common services that most backend applications will require. These services are:</p>
<ul>
<li>Database: This is a fully featured Postgres database.</li>
<li>Authentication: This is an enterprise ready authentication service that is based on a fork of the goTrue server.</li>
<li>Realtime: This is an API that adds the ability to use real-time capabilities in your applications.</li>
<li>Storage: This is a storage service which is an s3 wrapper.</li>
<li>Edge Functions: These are serverless functions that run on the edge. Powered by the Deno runtime.</li>
<li>Vector: This is a vector database that makes it easier to work with embeddings in your AI applications.</li>
</ul>
<p>Supabase is SOC2, HIPAA and GDPR compliant, self-host-able and open source. Furthermore, their authentication service exposes many strategies, giving you full control over your data and can be used independently of their other offerings. This and their auto documenting API makes it a very good choice for your applications. </p>
<h3 id="heading-how-to-use-supabase-auth">How to use Supabase Auth</h3>
<p>The first step is to set up your <a target="_blank" href="https://app.supabase.com/">Supabase project</a>'s auth settings. You can enable the exact authentication methods you want to use via the settings. There are three ways you can start using Supabase auth in your project:</p>
<h4 id="heading-the-api">The API</h4>
<p>You can directly use the authentication service in your applications by calling the auth endpoint and passing the user information to it. You can also get, update and delete your users.   </p>
<p>The API is automatically available when you create a project via the Supabase console and can be called like so: </p>
<pre><code class="lang-javascript"><span class="hljs-comment">//This will return an object containing an access token, the newly created user data and other metadata</span>
<span class="hljs-keyword">const</span> res = <span class="hljs-keyword">await</span> fetch(<span class="hljs-string">"https://<your-project-ref>/auth/v1/signup"</span>, {
  <span class="hljs-attr">method</span>: <span class="hljs-string">"POST"</span>,
  <span class="hljs-attr">headers</span>: {
    <span class="hljs-attr">authorization</span>: <span class="hljs-string">"Bearer YOUR_SUPABASE_KEY"</span>,
    <span class="hljs-string">"content-type"</span>: <span class="hljs-string">"application/json"</span>,
  },
  <span class="hljs-attr">body</span>: <span class="hljs-built_in">JSON</span>.stringify({
    <span class="hljs-attr">email</span>: <span class="hljs-string">"user-email"</span>,
    <span class="hljs-attr">password</span>: <span class="hljs-string">"user-password"</span>,
  }),
});
</code></pre>
<h4 id="heading-sdks">SDKs</h4>
<p>Supabase offers a few SDKs (software development kits) in different programming languages meant to make interacting with your Supabase project straightforward. Languages officially supported include Dart and JavaScript, with Python and others having strong community support. </p>
<p>The procedure for getting started involves adding the SDK as a dependency, then connecting your application to your Supabase project. </p>
<p>In the case of the JavaScript SDK, this would look something like this:</p>
<pre><code class="lang-javascript"><span class="hljs-comment">//Install via npm:</span>
npm install @supabase/supabase-js

<span class="hljs-comment">// or add cdn links: </span>
<script src=<span class="hljs-string">"https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"</span>></script>
</code></pre>
<pre><code class="lang-javascript"><span class="hljs-comment">//Then initialize </span>
Supabaseimport { createClient } <span class="hljs-keyword">from</span> <span class="hljs-string">'@supabase/supabase-js'</span>

<span class="hljs-keyword">const</span> supabaseUrl = <span class="hljs-string">'https://<your-project-ref>.supabase.co'</span>
<span class="hljs-keyword">const</span> supabaseKey = process.env.SUPABASE_ANON_KEY
<span class="hljs-keyword">const</span> supabase = createClient(supabaseUrl, supabaseKey)
</code></pre>
<p>Then you can access the authentication methods under the auth namespace like so:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">const</span> { data, error } = <span class="hljs-keyword">await</span> supabase.auth.signUp({
  <span class="hljs-attr">email</span>: <span class="hljs-string">'user email'</span>,
  <span class="hljs-attr">password</span>: <span class="hljs-string">'user password'</span>,
})
</code></pre>
<h4 id="heading-auth-ui-helpers">Auth UI Helpers</h4>
<p>Supabase provides helper libraries to make authentication using their service even easier. These libraries provide customizable login screens that support magic links, password based and social login strategies. </p>
<p>Currently, the libraries are available for JavaScript and Flutter. Supabase also provides a separate SSR (Server Side Rendering) package for applications that use server side frameworks and require a Supabase access token to be available to them.</p>
<p>To start using React Auth UI, as an example, first you need to install the dependencies as shown below:</p>
<pre><code class="lang-bash">npm install @supabase/supabase-js @supabase/auth-ui-react 
@supabase/auth-ui-shared
</code></pre>
<p>Then you can start using the library after initializing Supabase as in the SDK example above. Here is some sample code that shows how to use the auth UI library in a React application:</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">import</span> { useEffect } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { useNavigate } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-router-dom"</span>;
<span class="hljs-keyword">import</span> { Auth } <span class="hljs-keyword">from</span> <span class="hljs-string">"@supabase/auth-ui-react"</span>;
<span class="hljs-keyword">import</span> { ThemeSupa } <span class="hljs-keyword">from</span> <span class="hljs-string">"@supabase/auth-ui-shared"</span>;
<span class="hljs-keyword">import</span> { supa } <span class="hljs-keyword">from</span> <span class="hljs-string">"../constants"</span>;

<span class="hljs-keyword">const</span> AuthUi = <span class="hljs-function">() =></span> {
  <span class="hljs-keyword">const</span> navigate = useNavigate();

  useEffect(<span class="hljs-function">() =></span> {
    <span class="hljs-keyword">const</span> {
      <span class="hljs-attr">data</span>: { subscription },
    } = supa.auth.onAuthStateChange(<span class="hljs-function">(<span class="hljs-params">event</span>) =></span> {
      <span class="hljs-keyword">if</span> (event === <span class="hljs-string">"SIGNED_IN"</span>) {
        navigate(<span class="hljs-string">"/authenticated"</span>);
      }
    });

    <span class="hljs-keyword">return</span> <span class="hljs-function">() =></span> subscription.unsubscribe();
  }, [navigate]);

  <span class="hljs-keyword">return</span> (
    <span class="xml"><span class="hljs-tag"><<span class="hljs-name">Auth</span>
      <span class="hljs-attr">supabaseClient</span>=<span class="hljs-string">{supa}</span>
      <span class="hljs-attr">providers</span>=<span class="hljs-string">{[</span>"<span class="hljs-attr">google</span>", "<span class="hljs-attr">github</span>", "<span class="hljs-attr">apple</span>", "<span class="hljs-attr">discord</span>"]}
      // <span class="hljs-attr">controls</span> <span class="hljs-attr">whether</span> <span class="hljs-attr">to</span> <span class="hljs-attr">display</span> <span class="hljs-attr">only</span> <span class="hljs-attr">social</span> <span class="hljs-attr">providers</span>
      // <span class="hljs-attr">onlyThirdPartyProviders</span>
      <span class="hljs-attr">redirectTo</span>=<span class="hljs-string">"http://localhost:3000/authenticated"</span>
      // <span class="hljs-attr">comes</span> <span class="hljs-attr">with</span> <span class="hljs-attr">preconfigured</span> <span class="hljs-attr">themes</span>, <span class="hljs-attr">can</span> <span class="hljs-attr">add</span> <span class="hljs-attr">custom</span> <span class="hljs-attr">themes</span>
      <span class="hljs-attr">appearance</span>=<span class="hljs-string">{{</span> <span class="hljs-attr">theme:</span> <span class="hljs-attr">ThemeSupa</span> }}
      // <span class="hljs-attr">controls</span> <span class="hljs-attr">how</span> <span class="hljs-attr">to</span> <span class="hljs-attr">display</span> <span class="hljs-attr">the</span> <span class="hljs-attr">social</span> <span class="hljs-attr">provider</span> <span class="hljs-attr">icons</span>
      <span class="hljs-attr">socialLayout</span>=<span class="hljs-string">"horizontal"</span>
    /></span></span>
  );
};

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> AuthUi;
</code></pre>
<p>This would display the following form on screen: </p>
<p></p>
<h2 id="heading-summary">Summary</h2>
<p>Authentication is the process of the user identifying themselves and the server verifying this identity while authorization is the system determining what access the user should have to the resources and limiting the user accordingly.</p>
<p>After the server authenticates the user, it will pass the user information in the form of either a token or session ID within a cookie. </p>
<p>The information will be passed back and forth between the client and server whenever the user needs certain access until they expire or the user terminates the cycle by logging out or deleting their account.</p>
<p>This process of user verification occurs by employing certain factors of authentication. For example, one system may only require a password while another requires a password and a code sent to the users phone number.</p>
<p>Your authentication system can allow multiple strategies of authentication using any of the three auth factors.</p>
<p>Supabase is an excellent option if you opt not to handle your own auth.</p>
<p>Supabase auth can be accessed via the API, the SDKs and the Auth libraries. Supabase maintains an SSR package for server side frameworks.</p>
<h2 id="heading-resources">Resources</h2>
<p>The following resources are helpful further reading. They offer more explanations on authentication and authorization, as well as Supabase specific documentation.</p>
<ul>
<li><a target="_blank" href="https://www.upguard.com/blog/oauth#:~:text=OAuth%201.0%20has%20a%20consumer,resource%20server%2C%20and%20resource%20owner.">An indepth explanation of OAuth</a></li>
<li><a target="_blank" href="https://supabase.com/security">Supabase security</a></li>
<li><a target="_blank" href="https://supabase.com/docs/guides/auth">Supabase docs on authentication</a></li>
<li><a target="_blank" href="https://supabase.com/docs/guides/auth/auth-helpers/auth-ui">Auth UI docs page</a></li>
<li><a target="_blank" href="https://supabase.com/docs/guides/auth/auth-helpers">Supabase on auth helpers and SSR</a></li>
<li><a target="_blank" href="https://supabase.com/docs/guides/auth/sso/auth-sso-saml">On SSO, SAML and enterprise auth</a></li>
</ul>
 
</article>
</main></body></html>

Fatuma Abdullahi - freeCodeCamp.org

How to Build Secure SSR Authentication with Supabase, Astro, and Cloudflare Turnstile

Table of Contents

Prerequisites

Understanding the Technologies

What is Astro?

What are Astro Actions?

What is Supabase?

What is Cloudflare Turnstile?

Understanding SSR Authentication

SSR vs. SPA Authentication

Why Protect Auth Forms?

Part 1: How to Set Up the Backend

Set Up Supabase Backend

Set Up Cloudflare Turnstile

Part 2: How to Set Up the Frontend

Create the Astro Project

Configure Astro for SSR

Install Supabase Dependencies

Configure Environment Variables

Part 3: How to Set Up Supabase SSR

Create the Supabase Client

Create Middleware for Route Protection

Part 4: How to Build the User Interface

Update the Layout

Create the Sign-In Page

class="text-4xl text-left font-bold mb-12">Sign In to Your Account

Create the Protected Page

class="text-4xl text-left font-bold mb-12">You are logged in!

Part 5: How to Set Up Astro Actions

Create the Authentication Actions

Create the Code Exchange API Route

Part 6: How to Test Your Application

Notes and Additional Resources

Useful Documentation

Complete Code Repository

How to Move Figma Components to Penpot

Table of Contents

How to Recreate Existing Figma Files in Penpot

Using the Community-Supported Migration Plugin

Manually Recreating Figma components

Understanding the Penpot User Interface

Understanding Penpot Layouts

How to Create and Use Penpot Components

How to Create Reusable Assets in Penpot

How to Add and Use Icons in Penpot

Figma Vs. Penpot – My experience

Swapping Out Icons

Renaming Files and Folders

Adherence to Web Standards

Penpot Design System

Limited Shape Options in the Toolbar

Resources and Notes

How to Quickly Add Auth to your Flutter Apps with Supabase Auth UI

Table of Contents

Prerequisites

What is Supabase Auth UI?

Supported Authentication Methods

How to Set Up a Flutter Project

How to Connect to a Supabase Project

How to Implement Auth in a Flutter App

How to Set Up Supabase Email and OAuth Provider Authentication

How to Set Up GitHub as an OAuth Provider

How to Set Up Google as an OAuth Provider

How to Sign in a User using the Auth UI Package

How to Add Magic Link Auth

Native Auth Support – How to Sign in with Google

How to Theme Your Supabase Auth UI

Flexible Layout Options

Localization and Translation Ready

Summary

Resources

How to Build an AI-enhanced Task App with React and Appwrite

Table of Contents

Prerequisites

What is Appwrite?

How to Set Up the Appwrite Backend

How to Set up the React Frontend

How to Connect to the Appwrite Project

How to Build the Task Manager Application