DEV Community: Emore Ogheneyoma Lawrence

Understanding and Using the "as const" Keyword in Typescript

Emore Ogheneyoma Lawrence — Tue, 17 Jun 2025 03:30:50 +0000

Introduction
Understanding the as const keyword
Conclusion

Introduction

In Typescript, type inference is powerful, but sometimes we need more control over the types in our code. This is where the as const keyword comes in. By using as const, we ensure that Typescript treats our values with specific types, preserving and using their exact value instead of generalising them. In this article, we'll explore how the as const keyword works and how it can enhance your development with Typescript

Understanding the as const keyword

Typescript uses broader types when inferring the type of a value. For example, when you declare a variable with a string, Typescript will infer the type as string, rather than the exact string value you assigned. However, using the as const, you are telling Typescript to treat the value as a constant.

Let's look at some basic array examples

let message = "Hello, world!"; // Typescript infers type as "string"

const messageOne = "Hello, world!"; // Typescript infers type as "Hello, world!"

const messageTwo = "Hello, world!" as const; // Typescript infers type as "Hello, world!"

Note: The type inferred from the const messageOne variable is Hello, world! rather than the general string type because constants in Typescript already have their types inferred as the exact value assigned.

The difference becomes more evident when you use as const in contexts like arrays or objects where Typescript would generally infer more generic types.

const colors = ["red", "green", "blue"];// Typescript infers type as string[]

// Method One
const exactColors: ("red" | "green" | "blue")[] = ["red", "green", "blue"]; // type inferred as ["red", "green", "blue"]

// Method Two: using `as const` keyword
const exactColorsTwo = ["red", "green", "blue"] as const; // type inferred as ["red", "green", "blue"]

Well Method One is a valid way of telling Typescript to be specific with the type, but assume there were like a hundred types, it will be tedious and error-prone to type them out. Method Two is what we're going to be using moving forward.

Let's see a screenshot of the type inferred on the Method Two example above in VS code:

The array in the screenshot is readonly meaning we cannot change the value of the array by adding or deleting elements to or from it.

As shown in the screenshot above, it further emphasizes that the array is readonly, preventing any additions or deletions of elements.

Now let us try to access values in the arrays defined above using their indexes

const arrayResult = colors[0] // type is inferred as "string"
const arrayResultOne = colors[1] // type is inferred as "string"

const result = exactColorsTwo[0]; // type is inferred as  "red"
const resultOne = exactColorsTwo[1]; // type is inferred as "green"

Now let us use a basic object example
Below is a gif showing typescript inferring the type of an object

We can see from the above that before the addition of the as const keyword, the inference from typescript was generic(i.e string) but on adding the as const keywords, the type became more specific as seen in the illustration above

On adding the as const keyword, we also saw the readonly keyword which prevents us from modifying the original reader object.

We can take it a step further by trying to access a property in the reader object and see the type being inferred

Let's now see another example of using the as const keyword with Template literals

In the example above, hovering over the myMeal variable gives us the Union of all the possible outputs the myMeal variable can possibly have.

Now instead of logging what the output might look like in the function, we can hover over the myMeal variable and see what it looks like.

Conclusion

In this article, we have learnt about the as const keyword in typescript. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

What are your thoughts on this article? Feel free to share your thoughts in the comments section below.

How I Am Approaching Developer Relations at SMTP Express

Emore Ogheneyoma Lawrence — Tue, 01 Apr 2025 23:53:41 +0000

Why I am Choosing SMTP Express

I have always wanted to work on something of value, something that genuinely solves problems for the common person. But even more exciting is working on something that solves problems for developers. How cool is that? 😃

SMTP Express is a tool that enables frontend developers to send emails directly from their frontend applications without needing a custom backend. I love the product's UX, its functionality, and most importantly, what it offers. SMTP Express is currently expanding and is now providing services to businesses at a larger scale.

What I Have Done So Far

Here are some of the things I've worked on at SMTP Express:

I have published an article on Dev.to showing users how to integrate SMTP Express in their React applications. You can read it here.
I created a working, documented codebase that developers can clone, plug in their API keys, and immediately start using SMTP Express. You can check it out on GitHub here. (Note: It might be broken by the time you’re reading this as SMTP Express API has been modified). I am currently working on making new content for it.

What's Next?

The structure of the product has changed, and I’m working on new article ideas and content to reflect these updates. For now, my focus is on writing blog posts that help developers understand and use SMTP Express better.

I also want to foster more collaboration in the Discord community by sharing my articles and engaging more people to try out SMTP Express. The more people use it, the better we can refine and improve the tool!

Learning path

We already know that Developer Relations engineers have to be able to wear multiple hats. They also have to be ready to learn. I have had to learn about how Email sending works as this product niche primarily revolves around email sending. I'm still learning. It can be very overwhelming learning new things, but what's life without the thrill of learning and doing new things? Yeah, boring.

Conclusion

Being a Developer Relations Engineer is something I’ve always thought to myself, “This role fits me.” Now, I get to prove it. DevRel is all about helping developers reduce friction when using new tools, and that’s exactly where I come in.

At SMTP Express, I am currently working as a Developer Advocate, educating people on how they can use the tool for their personal or business needs. In the near future, I might even dive into documenting the product itself. Let’s see how it goes! 🤞

How I Am Approaching Developer Relations at SMTP Express

Emore Ogheneyoma Lawrence — Tue, 01 Apr 2025 23:53:41 +0000

Why I am Choosing SMTP Express

What I Have Done So Far

Here are some of the things I've worked on at SMTP Express:

I have published an article on Dev.to showing users how to integrate SMTP Express in their React applications. You can read it here.
I created a working, documented codebase that developers can clone, plug in their API keys, and immediately start using SMTP Express. You can check it out on GitHub here. (Note: It might be broken by the time you’re reading this as SMTP Express API has been modified). I am currently working on making new content for it.

What's Next?

Learning path

Conclusion

An Introduction to DevRel Foundations

Emore Ogheneyoma Lawrence — Tue, 18 Mar 2025 14:43:40 +0000

Developer Relations (DevRel) has evolved over the years. It has grown from being just about:

Documentation(Community)
Marketing(Two-way communication)
Technical Support(Strategic functions)

How is DevRel Now?

DevRel is currently a field where you (might) have to wear multiple hats (not literally). This simply means that roles within DevRel can sometimes be intertwined. You might find yourself doing tasks that aren’t primarily your role. But in the end, it all serves the same purpose: improving the developer experience and fostering a better relationship between developers and the company.

Fields of DevRel

1. Developer Advocacy

Developer Advocates are responsible for:

Creating content (talks, blogs, videos, sample code, etc.)
Speaking at conferences
Building relationships with key community members
Providing feedback to internal teams working on the product they advocate for

2. Developer Experience

This team focuses on making developers productive and happy by reducing friction when building software. Their roles include:

API design
SDK development
Documentation strategy and creation

3. Developer Marketing

This team is responsible for the growth metrics of a company (KPIs). They ensure that developers are aware of the product and how it fits into their workflows.

4. Community Management

Community Managers handle:

Running online forums and spaces

Note: You don’t need to be technical here, but having a technical background wouldn't hurt.

5. Developer Education

They focus on creating structured learning paths and educational materials, including:

Designing certification programs
Developing technical courses and curricula

Note: The end goal of Developer Education is to teach. Vercel and Next.js do this very well—you can see this through the number of courses they provide on their platforms.

6. Ecosystem/Integration

This role focuses on external partnerships and integrations. For example:

If a B2B company wants to integrate their service with another company, this role helps facilitate the process.
They handle meetings and support teams through the integration process from start to finish.

Other DevRel Fields Worth Mentioning

There are three other types of DevRel worth discussing:

1. Internal DevRel

The first time I heard about this was from Dillion Megida when he shared what he worked on. Internal DevRel professionals work within a company to improve relations between internal developers, ensuring better collaboration and developer experience inside the organization.

2. Open Source DevRel

This involves managing relationships with open-source contributors and maintaining open-source projects. It requires a mix of advocacy, community building, and education.

3. Build-in-Public

Some companies engage in DevRel by building in public—showing their development process transparently. This helps attract developers and builds trust within the community.

Pillars of DevRel

There are three solid pillars of DevRel:

a. Education

This involves having clear documentation, tutorials, and workshops to help developers use a product effectively.

b. Advocacy

Advocacy focuses on gathering feedback and communicating it to internal teams to shape and improve a product.

c. Community

This is about building spaces around a product or service where developers can engage, collaborate, and grow together.

Note: While these subcategories exist, in early-stage startups, you may find yourself doing all of them. Like I said in the beginning, DevRel is a field where you'll have to wear multiple hats, but the end goal remains the same: creating a better experience for developers and fostering meaningful relationships between developers and companies.

Starting My DevRel Journey with DxMentorship: How Technical Writing Led Me Here

Emore Ogheneyoma Lawrence — Thu, 06 Mar 2025 11:15:27 +0000

Our First Session (Kickoff Session)

For the past year, I've been looking to do Developer Relations(DevRel) stuffs. I've done a lot of research and realized it's a field where you (might) have to wear multiple hats. It feels good, ngl :)

After all the fun research stuff and looking for ways to break into DevRel or at least start doing DevRel stuff, I realized I was already doing one (Technical Writing)

Technical Writing was the easiest way in for me because of my technical experience. And writing this now, I see why Ekene said during the kickoff session, "Eventually, you'll navigate towards the path of LEAST RESISTANCE" to answer a mentees question of "How do we know the path we would take?". This made a whole lot of sense to me.
As I've joined this program, I'm open to exploring and I hope to find other areas of DevRel I will resonate with (pretty cool, tbh)

The Kickoff Session

Ekene Eze welcomed us as we joined the call. He talked about the programs duration, our weekly sessions, connect sessions and the Clans concept (more like teams, but it also reminded me of Clans in the Naruto verse 😂)

He also mentioned we'd have events like Twitter Spaces, YT streams, blog posts and more .

Everything was going well, till MTN attacked and decided to announce their presence.
(For context MTN is a Telecommunication company that operates in Africa)

At this point, I was tired and trying not to curse or use the F word (we're in LENT please). My network was acting up, lagging badly. I missed a couple of important things.

But shoutout to Shola, I reached out to him after the session ended, and he filled me in on the things I missed.

Also big ups to the coordinators for recording the meeting and making it available to us.

This is me exploring something I've wanted to do for a while now. It's been a while since I joined a program like this, and I want to document this journey properly.

In Ekene Eze's voice(I'm not too sure who was talking then because MTN signal was very bad), "OWN YOUR JOURNEY"
Yeah, this is me OWNING MY JOURNEY.

Thanks for reading this far. Leave a like (please 😂🙏) and share with your friends who find DevRel interesting.
Also, check some of my articles on here.

Ttyl 👋

Enhancing Form User Experience with CSS: Real-Time Feedback Techniques for Better User Interaction

Emore Ogheneyoma Lawrence — Wed, 08 Jan 2025 07:11:43 +0000

Introduction
Prerequisites
CSS Pseudo-Classes for Real-Time Feedback
Conclusion

Introduction

Imagine this: You're completing a registration form with multiple fields. You push yourself to finish it, only to be met with an alert that says, The value entered input field X is invalid or you see an error message slightly below the input field(s) with the error(s). While these methods do provide feedback, there are more user-friendly ways to enhance the experience.

The ultimate goal of any software is to simplify life for its users, and feedback plays a crucial role in achieving this. Providing immediate, clear feedback improves user experience. In this article we'll explore how CSS can deliver real-time feedback, making your forms more responsive and user-friendly.

Prerequisites

To follow along with this tutorial, all you need is a basic understanding of HTML and CSS. That's it. Let's go!

CSS Pseudo-Classes for Real-Time Feedback

To show how CSS pseudo-classes can provide real-time feedback in forms, we'll use this HTML and CSS code below. The code features a few basic input fields to get us started.

<form>
    <div>
        <label for="name">Name</label>
        <input 
            type="text" 
            id="name" 
            placeholder="Name"
            required
        />
    </div>

    <div>
        <label for="email">Email</label>
        <input 
            type="email" 
            id="email" 
            placeholder="email@gmail.com"
            required
        />
    </div>

    <div>
        <label for="password">Password</label>
        <input 
            type="password" 
            id="password" 
            placeholder="6+ characters"
            required
            minlength="6"
        />
    </div>

    <button>Submit</button>
</form>

Here is the CSS:

form{
    padding: 1rem;
    width: 50%;
    div {
        display: flex;
        flex-direction: column;
        margin-bottom: 1rem;

        label{
            font-weight: bold;
            margin-bottom: 5px;
        }

        input{
            padding: 10px;
            border-radius: 5px;
            outline: 2px solid black;
        }
    }

    button{
        padding: 10px 1rem;
        border-radius: 5px;
        cursor: pointer;
    }
}

Here's what we have at the moment:

So the pseudo-classes we will focus on are :valid, :invalid, :user-valid, :user-invalid, :placeholder-shown, :focus

So let's start with the :valid pseudoclass

we can use this directly in our CSS file to target the input element and this checks if the input in question is Valid i.e contains the required element

Here's an updated snippet of the CSS code containing the code:

 input:valid{
   outline-color: lightgreen;
 }

Here we are changing the outline-color to lightgreen when the user types in valid(acceptable) data in the input fields

While the :valid pseudo-class helps users see when their input meets the required criteria, the :invalid pseudo-class is equally important for improving user experience. This pseudo-class allows you to style input fields that contain invalid data.

The :invalid pseudo-class is triggered when the value entered into a form field does not match the expected type or format, examples being missing the @ symbol or a password that is too short or below the minimum length for the password field

Now let us add the :invalid pseduo-class to our existing CSS code

input:invalid{
  outline-color: red;
}

Here's the output of using the :invalid class:

This is expected because the input fields have the required attribute and they are at the moment.

We obviously don't want this, but then CSS has yet another pseudo-class we can use in this case: the :user-valid and :user-invalid pseudo-classes

Let us update our code to use :user-valid and :user-invalid pseudo-classes

 input:user-valid{
   outline-color: lightgreen;
 }

input:user-invalid{
  outline-color: red;
}

NB: :user-valid pseudo-class gives feedback to the users when they have filled the input field and are moving to another input field. (restructure this)
It works the same way for :user-invalid pseudo-class. When you fill in a value and then remove the entered value, the red colour from the :user-invalid pseudo-class is triggered.

Here's how it looks

Note: :user-valid and :user-invalid do not currently have wide-range user support for all browsers at the moment. You can choose to use it in personal projects but be careful where you use it

Even with the existing caveat of using the :user-valid and user-invalid, there's another pseudo-class we can use to avoid the browser support issue, the :placeholder-shown.
The :placeholder-shown is used with a combination of the :valid pseudo-class and a :not() pseudo-class. I have an article on using the :not() pseudo-class. You can read it here

input:not(:placeholder-shown):valid{
  outline-color: lightgreen;
}

input:not(:placeholder-shown):invalid{
  outline-color: red;
}

In the code above, the outline-color is triggered if and only if the placeholder-shown is false. It only runs if the placeholder is not there(if a value has been entered into the input)

Here's how it looks when tested(run on the browser)

Now, looking at the :placeholder-shown in action in the picture above, you notice that on the Email Input element, the red outline is activated immediately the user starts typing in, and it changes to red when the criteria is met, i.e the user put in a proper email format.
Now the issue is that some users don't like this and it isn't user friendly as users will definitely have to type in a bunch of characters til they get to their correct email word.
So what do we do when the CSS rule we write is picking the invalid styles due to the reason above, we use the :focus pseudo-class.

Add the following code to your CSS:

input:focus:invalid{
  outline-color: orange;
}

Now let's check and see how it is on the browser

Conclusion

In this article, we have learnt about pseudo-classes that help to make our forms more user friendly. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

You can check the codebase here

What are your thoughts on this article? Do you know other pseudo-classes we can use to make our forms give immediate feedback to users in CSS? Feel free to share your thoughts in the comments section below.

How to Use JavaScript's structuredClone() for Deep Object Cloning

Emore Ogheneyoma Lawrence — Mon, 23 Sep 2024 23:52:11 +0000

Table of Content

Introduction
Understanding and using structuredClone
Conclusion

Introduction

Have you ever tried copying an object in Javascript using the spread operator (...), only to realize that changes to the original still affect the copy? It can be frustrating when you expect a copy independent from the original but end up having one linked to the original. This is a common issue when dealing with deep objects, and it can lead to unexpected bugs. Thankfully, Javascript has the structuredClone() method to solve this problem

Understanding and using structuredClone()

To start with, the structuredClone() method in Javascript is used to make deep copies of objects, including those with nested structures like arrays, objects and other complex data types.

You might be wondering: what exactly is a copy, and how many types of copying do we have in JavaScript? Well, we have the shallow and deep copies. While we know that structuredClone() creates the latter, using the spread operator creates the former.

A shallow copy copies only the top-level properties of an object, meaning nested objects or arrays are still referenced from the original. On the other hand, a deep copy duplicates everything, including nested structures, ensuring that the clone is fully independent of and from the original.

Let's see some examples of the Shallow and Deep copies in javascript

Shallow Copy Example

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

const personClone = {...person}; // shallow copy

// Modify the languages array in the cloned object
personClone.languages.push("Spanish");

// Check the original and the cloned object
console.log(person.languages);  // Output: ["English", "German", "Spanish"]
console.log(personClone.languages);  // Output: ["English", "German", "Spanish"]
console.log(person.languages === personClone.languages) // true

// However, changing a primitive value won't affect the original
personClone.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(personClone.name);  // Output: "Jane Doe"
console.log(person.name === personClone.name) // false

From the code above, we can say the following:

The name property is a primitive value, so changing it in the shallow copy(personClone.name = "Jane Doe";) does not affect the original (person.name)
The languages array is non-primitive, so both the original(person) and the clone(personClone) share the same reference. Modifying the personClone array affects the original person array

Deep Copy Example

const person = {
    name: "John Doe", 
    languages: [
       "English", 
       "German"
    ]
};

// Create a deep copy using structuredClone
const deepClonedPerson = structuredClone(person);

// Modify the deep cloned object
deepClonedPerson.languages.push("Spanish");

// Check if the original and the deep clone are equal
console.log(person === deepClonedPerson);  // Output: false
console.log(person.languages) // ['English', 'German']
console.log(deepClonedPerson.languages) // ['English', 'German', 'Spanish']
console.log(person.languages === deepClonedPerson.languages);  // Output: false

// Check if the properties are equal
console.log(person.name === deepClonedPerson.name);  // Output: false

// Changes in the deep cloned object don't affect the original
deepClonedPerson.name = "Jane Doe";

console.log(person.name);  // Output: "John Doe"
console.log(deepClonedPerson.name);  // Output: "Jane Doe"

From the code above, we can conclude the following:

person === deepClonedPerson confirms that structuredClone() creates a new, independent object.
person.languages === deepClonedPerson.languages shows that the nested array is also independently copied.
Checking person.name === deepClonedPerson.name verifies that changes to the deep clone do not affect the original object.
Values of languages demonstrate that modifications to the deep clone (deepClonedPerson) are not reflected in the original(person)

Conclusion

In this article, we explored how the structuredClone() method provides a reliable way to create deep copies of objects, ensuring that nested structures are fully independent of the original.

Thank you for reading through this article. If you found this article helpful, please like and share it with others who might benefit from learning about deep copying in Javascript

What are your thoughts on this topic? Have you encountered other techniques for copying objects in Javascript? Feel free to share your insights in the comments section below.

P.S. I'm currently looking for frontend developer opportunities. If you have any leads or are hiring, feel free to check out my resume or connect with me on LinkedIn. I'd love to hear from you!

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Emore Ogheneyoma Lawrence — Tue, 17 Sep 2024 12:56:41 +0000

Table of content

Introduction
Using clamp() Function to Achieve Fluid Typography
Conclusion

Introduction

Writing CSS media queries can be sometimes ~~challenging~~ fun, especially when there are too many things to be done. We often focus so much on building the layout and making other parts of our website responsive that it becomes stressful. But what if we could reduce that stress by making our text scalable, no matter the screen size, without needing to write a ton of media queries?

Let’s dive in and get started on how to achieve fluid typography using the CSS clamp() function.

Using Clamp() Function to Achieve Fluid Typography

The problem

Here’s a basic webpage with an H1 tag and a P tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Fluid Typography</title>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body{
            font-family: Arial, sans-serif;
            background: #333;
            color: white;
            text-align: center;
        }

        h1{
            font-size: 5rem;
        }

        p{
            font-size: 3rem;
            color: red;
        }
    </style>
<body>
    <h1>CSS Fluid Typography</h1>
    <p>Why is this text not scalable</p>
</body>
</html>

Now let's take a look at how the text behaves on different screen sizes

A simple way to make the text above responsive is to use media queries, but in this article, we’ll make the text responsive using the CSS clamp() function.

But before that, let's first look at the vw (viewport width) unit. The vw unit allows you to set your font size relative to the width of the viewport, making your text responsive.

Let's update our existing code with the following changes:

<style>
  h1 {
    font-size: 10vw; /* H1 size is 10% of the viewport width */
  }
  p {
    font-size: 5vw;  /* p size is 5% of the viewport width */
    color: red;
  }
</style>

If the viewport width is 1000px:
The h1 font size will be 100px
The p font size will be 50px
The font sizes for H1 and p will continue to grow or shrink as the viewport width changes.

Let's see how it looks:

From the GIF above, we can see that using vw works for responsive text but lacks constraints. As the viewport width increases, the font size will keep growing without limit, and similarly, it will keep shrinking when the viewport width decreases.

This is where the clamp() function comes into play. clamp() allows you to set a minimum, preferred, and maximum font size, providing control over how the text scales within a defined range.

The Solution

Using the clamp() function

The clamp() function in CSS allows you to set a range for your font size.
The general format is :

clamp(minimum, preferred, maximum)

Minimum: The smallest size your text can shrink to.
Preferred: The ideal size, often a percentage of the viewport width
Maximum: The largest size your text can grow to.

Let's use the example from above and modify the code with the following

h1{
  font-size: clamp(24px, 5vw, 48px); /* Font size scales between 24px and 48px */
}

p{
  font-size: clamp(16px, 3vw, 24px) /* Font size scales between 16px and 24px) */
}

Let's see how it looks on the browser:

Now, the h1 and p elements will be responsive, as their sizes will stay within the defined range, ensuring they don't become too large or too small.

Conclusion

In this article, we have learnt how to achieve fluid typography using the CSS clamp() function. Thank you for reading to this point. I ask that you drop a like and share this article with your peers who will benefit from this.

What are your thoughts on this article? Feel free to share your thoughts in the comments section below.

P.S. I'm currently looking for frontend developer opportunities. If you have any leads or are hiring, feel free to check out my resume or connect with me on LinkedIn. I'd love to hear from you!

Upgrading Supabase's Email Rate Limits in User Registration: A Practical Guide"

Emore Ogheneyoma Lawrence — Tue, 10 Sep 2024 07:10:20 +0000

Introduction
Prerequisites
What is Supabase and Setting Up the Supabase Project
Integrating Supabase with ReactJS
Exploring the Email Rate Limit Issue
Implementing the Solution
Conclusion

Introduction

Imagine this: you're building a web application with ReactJS on the frontend and Supabase as your preferred backend solution. You're making progress but suddenly realize you can only send 3 emails per hour on user registration. That sucks, right? Yeah, it does.
In this article, we will dive into how to integrate a React application with Supabase authentication, we will then look into how Supabase's built-in email functionality can become a bottleneck, as it limits the number of emails that can be sent within a given timeframe which can in turn hinder the scalability of your application.
All right, enough talk. Let's dive right in

Prerequisites

This article assumes that you know the basics of using ReactJS. It's also helpful if you're already familiar with integrating and using Supabase, though it's not mandatory. You can follow along even if you're not an expert. If you're here for just the solution, you're in the right place.

What is Supabase and Setting up the Supabase Project

Like stated on the image above, Supabase is an open source Firebase alternative that offers services like starting or having your own Postgres Database, Authentication, Storage, Realtime subscriptions and so much more. It's designed to help developers build and scale applications quickly and efficiently.

Let's set up a Supabase project. Head over to supabase website and create an account.
You will then be redirected to your dashboard to help create a project.
Here's how the dashboard will look like.
NB: You won't have any projects in it if you're just creating an account

Click on the New project button and then you'll be asked to fill the following below:

Proceed to click on the Create new project button. This creates the supabase project.
We are then redirected to our created project on our dashboard and it will look like this:

Congratualations, we've successfully set up our project on the supabase platform

Integrating Supabase with React JS

I would have loved to show you the full authentication system that includes features like login, logout, and protected routes. We will keep it simple and just focus on overcoming Supabase's email rate limits during registration.

Create a react project using vite using any of the commands below:

npm create vite@latest my-app -- --template react # javascript
npm create vite@latest my-app -- --template react-ts # typescript

After that, you have to install the supabase client library into your project. You can install it using the command below:

cd my-app && npm install @supabase/supabase-js

The command above enters the my-app directory/folder and installs the supabase client library in the project

After this, we would need to create an instance of the supabase client:
Make a folder in your src folder and call it supabase then create a file named supabaseClient.ts and populate it with the code below
NB: use .js if you created a React Javascript project

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

// Create a single supabase client for interacting with Supabase API (authentication, database, storage etc)
export const supabase = createClient(
  import.meta.env.VITE_REACT_APP_SUPABASE_URL,
  import.meta.env.VITE_REACT_APP_SUPABASE_ANON_KEY
);

Let's get started building the User Interface(UI) for the Register page

import { useState } from "react";
import "./Register.css"; 

const Register = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [loadingStatus, setLoadingStatus] = useState(false);

  const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };
  return (
    <div className="registerPage">
      <h2>Register</h2>
      <form onSubmit={handleRegister}>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            required
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            required
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="confirmPassword">Confirm Password:</label>
          <input
            type="password"
            required
            id="confirmPassword"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
        <button type="submit">
          {loadingStatus ? "Loading..." : "Register"}
        </button>
      </form>
    </div>
  );
};

export default Register;

This is what we have from the code above:

Now let's connect our Register page to our Supabase project.
We start by getting our SUPABASE_URL and SUPABASE_ANON_KEY keys from our created supabase project, which in our case is our supabase-article

So to get these keys, navigate to your Project Settings then click on the API link.

Here is a pictorial view of where the keys are:

Create a .env file in your react root-directory, which in our case is the my-app project. Now copy the keys and put them in a .env file created

VITE_REACT_APP_SUPABASE_URL=<supabase_url>
VITE_REACT_APP_SUPABASE_ANON_KEY=<supabase_anon_key>

Replace supabase_url and supabase_anon_key with the API keys.
NB: Make sure the VITE_REACT_APP_SUPABASE_URL AND VITE_REACT_APP_SUPABASE_ANON_KEY variables are the same as what you used in the supabaseClient.ts file above

Now let us proceed by doing some validations on the handleSubmit function and connect registration page to supabase

Here's the updated code of the handleRegister function:

 const handleRegister = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault(); // prevents page from reloading on submit of form

     setLoadingStatus(true)

// Do your validations here
  if(password !== confirmPassword){
    alert("Passwords do not match");
    setLoadingStatus(false)
    return;
  }

// supabase registration
    try {
        const { data, error } = await supabase.auth.signUp({
          email: email.trim(), // trim() removes white spaces from the text entered
          password: password,
          options:{
            data: {
              // add additional data here            
            }
          }
        })

        if (error){
          throw error
        }

        // check for user email uniqueness
        if (data?.user?.identities?.length === 0) {
          alert("Email already registered. Please try a different email.");
          setLoadingStatus(false);
          return;
        }

        console.log("User data:",data);
        alert("Sign up successful! Check your email for the verification link") 
    } catch (error) {
      console.log("Error signing up:", error)
      // @ts-expect-error("allow")
      alert(error?.message);
      setLoadingStatus(false);
    } finally {
      setLoadingStatus(false);
    }
};

The above code does the following:

e.preventDefault() prevents the page from reloading when the form is submitted
We are checking if the password and confirmPassword state match. If they do not match, we stop the function from going further using the return keyword.
We then use the created supabase instance created by accessing the supabase.auth.signUp() method and we pass in the required data.
We then check if the email being used to register has not been used. We know that emails are unique as no two users can have the same email.

If all things go as planned, we would have a registered user in our Supabase users database.
Let's test it out:

Below is the email we got from supabase asking us to verify our email address:

Now, once this is all completed, we can then go to Authentication section of your supabase-article project, this is where you'll see a list of registered users.

Now let us try to register another user:

This is bad for our application's scalability as we need users to be able to register on our apps for them to be able to use them.
We will look into the error and explore why it exists in the next section.

Exploring the Email Rate Limit Issue

We've seen from the previous section the email rate limit issue firsthand. Despite registering just one user (this can vary, but supabase only sends 3 emails an hour), Supabases's built-in email service quickly hits its limit, throwing errors that prevent further registrations.
Supabase's default email service is designed for TEST MODE use only, as highlighted in their documentation here

Here is a screenshot of what it says:

Now that we've seen this, let's implement the solution

Implementing the Solution

Head over to your project dashboard, in our case it's our supabase-article then navigate to the Project Settings > Authentication.
Scroll down to the SMTP Settings section. You would see this picture

The Sender email should be your email or your business email, while your Sender name should be your name, business or product name.

Set the Host to smtp.gmail.com, and you can set the Port Number to 465 or 587

Now the Username should be your email address. The main thing we need is the password. This is gotten from your Gmail security settings

Open your Gmail and Navigate to Account

Click on the Security option below:

To get your smtp password, 2-Step Verification is required.
Click on the 2-Step Verification below

Put on the 2-Step Verification, then scroll down to the App passwords section, you would be prompted with a new screen asking you to enter your App name, you can use supabase-article

On clicking the Create Project button, you will see the password as shown below. Copy it and save it somewhere as it is shown once. Remove the spaces and use the password in the smtp password field.

Now that we have all that we need, you can click on the save button

After we have done this, let us now go and adjust our Email rates
At the top of the SMTP Settings section, you would see the text "Email rates can be adjusted here" as seen in the picture below"

Click on the here link then you'll be redirected to this page below:

You can then change the Rate limit for sending emails to any number depending on how well your application will be used.

Scroll to the bottom and click on the save button.

Now let us try registering another user on our application

Now going to check our email, we see the images below:

Hooray 🎉🎉, we've successfully set up and use Gmails Smtp to help us bypass supabase's rate limits.

Conclusion

In this article, we found a workaround around supabase's rate limit. We used gmails smtp to help us bypass the rate limits. Thank you for reading up this point. I ask that you drop a like and share this article with your peers who will benefit from this.

You can check the codebase here

What are your thoughts on Bypassing Supabase's Email Rate Limit? Have you encountered something like this and how did you resolve it? Feel free to share your thoughts in the comments section below.

P.S. I'm currently looking for frontend developer opportunities. If you have any leads or are hiring, feel free to check out my resume or connect with me on LinkedIn. I'd love to hear from you!

Sending Calendar Invites with React and SMTP Express

Emore Ogheneyoma Lawrence — Wed, 07 Aug 2024 10:38:58 +0000

Introduction
Sending Calendar Invites functionality
Conclusion

Introduction

Our previous article explored how to leverage SMTP Express to send basic emails directly from your React application. Now let's step it up a little bit by learning how to send Calander Invites
Please check out the first article on this as it will provide you with the basic things you need to set up and get started with SMTP and integrating it into your React. Check it out here

Sending Calendar Invites Functionality

Building upon the setup from the first path of this article, let's dive straight into the code for sending calendar invites!

import { useState } from "react";
import { smtpexpressClient } from "../../services/smtp";

const CalendarInvite = () => {
  const [loading, setLoading] = useState(false)
  const [eventTitle, setEventTitle] = useState("");
  const [email, setEmail] = useState("")
  const [startDateInvite, setStartDateInvite] = useState("")
  const [endDateInvite, setEndDateInvite] = useState("")
  const [location, setLocation] = useState("")
  const [url, setUrl] = useState("")
  const [meetingLocation, setMeetingLocation] = useState("")
  const [description, setDescription] = useState("")

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setLoading(true);    

    try {
      await smtpexpressClient.sendApi.sendMail({
        subject: "Calender Invite",
        message: "Please find the attached calendar invite.",
        sender: {
          email: import.meta.env.VITE_SMTP_PROJECT_SENDER_EMAIL,
          name: "Alex Johnson", // Full name of the sender for personalization
        },
        recipients: {
          email: email, 
          // name: "John Doe", // name of the recipient for personalization
        },
        calendarEvent: {
          title: eventTitle,
          startDate: new Date(startDateInvite),
          endDate: new Date(endDateInvite),
          organizer: "alex.johnson@company.com", //  use the email of the event organizer
          location: location === "remote" ? url : meetingLocation,
          url: url, // meeting link
          description: description,
        },
      });

      // Notify user of successful submission
      alert("Please check your email to view the sent message");
      setLoading(false)

      // clear your form fields.
    } catch (error) {
      console.log(error);
      alert("Oops! Something went wrong. Please try again later.");
      setLoading(false)
    } finally{
      setLoading(false);
    }
  }

  return (
    <div className="app">
      <h2 className="" title="documents, images and more">
        Calander Invite Email Form
      </h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="emailInput">Email:</label> <br />
          <input
            id="emailInput"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="johnDoe@gmail.com"
          />
        </div>

        <div>
          <label>Title</label>
          <input
            type="text"
            required
            value={eventTitle}
            onChange={(e) => setEventTitle(e.target.value)}
            placeholder="Event Title"
          />
        </div>

        <div>
          <label>Description</label>
          <input
            type="text"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Event Description"
          />
        </div>

        <div>
          <label>Date and Start Time</label> <br />
          <input
            required
            type="datetime-local"
            value={startDateInvite}
            onChange={(e) => setStartDateInvite(e.target.value)}
          />
        </div>

        <div>
          <label>Date and End Time</label>
          <input
            required
            type="datetime-local"
            value={endDateInvite}
            onChange={(e) => setEndDateInvite(e.target.value)}
          />
        </div>

        <div>
          <label>Location</label>
          <select
            value={location}
            onChange={(e) => setLocation(e.target.value)}
            required
          >
            <option value=""></option>
            <option value="remote">Remote</option>
            <option value="physical">Physical</option>
          </select>
        </div>

        {location === "remote" && (
          <div>
            <label>URL Link</label>
            <input
              required
              type="url"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="Meeting Link"
            />
          </div>
        )}

        {location === "physical" && (
          <div>
            <label>Enter Location</label>
            <input
              required
              type="text"
              value={meetingLocation}
              onChange={(e) => setMeetingLocation(e.target.value)}
              placeholder="Meeting Location address"
            />
          </div>
        )}

        <button>{loading ? "Loading..." : "Send Calender Invite 🚀"}</button>
      </form>
    </div>
  );
}

export default CalendarInvite

The code above does the following:

State Management: Uses useState for form inputs and loading state.
Form Submission: handleSubmit() function prevents default, sets loading, sends email, and handles success/failure alerts.
Renders Form: includes input fields for email, event title, dates, location, URL (if remote), meeting location (if physical), and description.
Conditional Rendering: Shows URL if remote, meeting location if physical.
Submit Button: Displays "Loading..." during form submission.

Here is the User Interface layout with pre-filled details:

On clicking the Send Email button, you should get an alert saying Please check your email to view the sent message. You would see this if you correctly configured the project.

We then get the Calendar invite in our mail, here's proof of it below:

Conclusion

We've seen how we can send Calendar invites using SMTP Express in our React JS application. Thank you for reading up to this point. Try to share this with your peers who may also benefit from its insights.

You can check the codebase here

What are your thoughts on Sending Calendar Invites with React and SMTP Express? Feel free to share your thoughts in the comments section below.

Send Emails in your React JS App with SMTP Express

Emore Ogheneyoma Lawrence — Sat, 04 May 2024 08:02:05 +0000

Introduction
Prerequisites
What is SMTP Express
Project Setup
Creating the Email Form Component
Installing SMTP Express SDK
API Key Integration
Handling Form Submission
Testing the Email Functionality
Preventing Abuse
Conclusion

Introduction

Sending emails remains a pivotal feature in modern web applications, providing users with essential feedback on their data interactions. Traditionally, backend systems have shouldered the responsibility of managing email dispatch(delivery). However, the emergence of SMTP Express introduces a game-changing approach, allowing frontend applications to send emails directly, bypassing the need for complex backend setups.

In this article, we embark on an exploration of how to seamlessly integrate SMTP Express into React JS applications, transforming the email-sending experience.

Without further ado, let's plunge into the intricacies of harnessing SMTP Express to streamline email transmission in our React JS projects.

Prerequisites

This article assumes that you at least know the basics of working with react forms. You do not have to be an expert to follow along.

What is SMTP Express

At its core, SMTP Express is an email delivery service that allows developers to send emails directly from their projects without needing a backend server. But we do much more than just basic email sending.

SMTP Express has evolved into a comprehensive business emailing suite that empowers developers and businesses with a complete email infrastructure. Beyond transactional emails, SMTP Express allows you to provision professional inboxes, collaborate seamlessly with team members on shared inboxes, and reach your audience effectively through its powerful Email Broadcast Platform.

Whether you're building a simple contact form or managing complex email workflows for your business, SMTP Express provides all the tools you need in one integrated platform.

Project Setup

To initiate our project setup, the first step involves registering with SMTPExpress.

Once registered, you'll gain access to a dashboard similar to the one shown below:

If you're new to SMTP Express, your projects list will be empty.

Click the New Project button to open a modal where you can create a new project, as shown below.

We'll use SmtpExpress-demo as the project name for this example.

After clicking the Create Project button, you'll be taken to the dashboard, which looks like this:

Hooray! 🎊🎉 Our project setup on the SMTP Express Platform is now complete.

Creating Email Form

Create a basic react project and add the following lines of code:

import { useState } from "react";
import "./App.css";

function App() {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    if (!email || !message) {
      setLoading(false);
      return;
    }
    console.table({ email, message });
    setLoading(false);
  };

  return (
    <div className="app">
      <h2 className="app">Email Sending Form</h2>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="emailInput">Email:</label> <br />
          <input
            id="emailInput"
            type="email"
            required
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          ></input>
        </div>

        <div>
          <label htmlFor="message">Message:</label> <br />
          <textarea
            id="message"
            cols={30}
            rows={10}
            required
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          ></textarea>
        </div>

        <button>{loading ? "Loading..." : "Send Email 🚀"}</button>
      </form>
    </div>
  );
}

export default App;

The Style for the form are as follows:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.app {
  display: grid;
  place-items: center;
}

.app h2 {
  font-size: 2rem;
  margin: 1.5rem 0;
}

.app > form {
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

@media screen and (max-width: 768px) {
  .app > form {
    width: 80%;
  }
}

label {
  font-size: 1.25rem;
  font-weight: 600;
}

.app > form > div > input,
.app > form > div > textarea {
  margin-top: 1rem;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
}

.app > form > button {
  margin-top: 1rem;
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-radius: 0.25rem;
  background-color: #007bff;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.app > form > button:hover {
  background-color: #0056b3;
}

After adding the styles, we should have something like this on our web page:

Now that we have our UI all set up, let's move on and see how to integrate SMTP Express into our React Application.

Installing SMTP Express SDK

Here comes the exciting part! We'll integrate SMTP Express into our React JS project.

To install SMTP Express SDK, we need to run the following command in any terminal of our choice

npm install smtpexpress

The code above adds the SMTP library to our React JS Project.

API Key Integration

To begin, create a new file using either JavaScript or TypeScript. Let's name this file smtp.js if you're using JavaScript, or smtp.ts if you're using TypeScript

Now add the following code to it

import { createClient } from "smtpexpress"

export const smtpexpressClient = createClient({
  projectId: "<INSERT_PROJECT_ID>",
  projectSecret: "<INSERT_PROJECT_SECRET>"
});

Getting Your API Credentials

Once you’ve created a project, your Project ID, Project Secret, and Sender Address are all available right from the Overview section of your project dashboard.

Just copy the values and paste them into your smtp.js or smtp.ts file where indicated.

Now that your credentials are set up, let’s move on to setting up our environment variables.

Using Environment Variables

To keep things organized and secure, it's a good idea to store your credentials and config values in an .env file. For this project, I’ve added the following variables to my .env.local file:

VITE_SMTP_PROJECT_ID=your_project_id_here
VITE_SMTP_PROJECT_SECRET=your_project_secret_here
VITE_SMTP_PROJECT_SENDER_EMAIL=you@example.com

Then in your code, you can access them using import.meta.env like so:

export const smtpexpressClient = createClient({
  projectId: import.meta.env.VITE_SMTP_PROJECT_ID,
  projectSecret: import.meta.env.VITE_SMTP_PROJECT_SECRET,
});

And when sending an email:

sender: {
  name: "SMTPExpress Article Demo by DevYoma",
  email: import.meta.env.VITE_SMTP_PROJECT_SENDER_EMAIL,
}

Now let's move on to Handling our form submission and successfuly sending our first email via SMTPExpress

Handling Form Submission

Back in the Creating the Email Form section, we successfully crafted a dynamic form component, equipped with the email and message input fields and an onSubmit handler.

We will have to update or redefine the onSubmit handler which is the handleSubmit function in our case.
Here's how the code looks like now:

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    if (!email || !message) {
      setLoading(false);
      return;
    }
    console.table({ email, message });
    try {
      // Sending an email using SMTP
      await smtpexpressClient.sendApi.sendMail({
        // Subject of the email
        subject: `Contact form submission from ${email.split("@")[0]}`,
        // Body of the email
        message: `
          <p><strong>Message from:</strong> ${email}</p>
          <p><strong>Content:</strong></p>
          <p>${message}</p>
        `,
        // Sender's details
        sender: {
          // Sender's name
          name: "SMTPExpress Article Demo by DevYoma",
          // Sender's email address
          email: import.meta.env.VITE_SMTP_PROJECT_SENDER_EMAIL,
          // email: "xxxxxxxxx" 👈put your Project Sender Address here
        },
        // Recipient's details
        recipients: {
          // Recipient's email address (obtained from the form)
          email: email,
        },
      });

      // Notify user of successful submission
      toast.success("Please check your email to view the sent message.");
      setLoading(false);

      setEmail("");
      setMessage("");
    } catch (error) {
      // Notify user if an error occurs during submission
      toast.error("Oops! Something went wrong. Please try again later.");
      console.log(error);
      setLoading(false);
    } finally {
      setLoading(false);
    }
  };

Testing the Email Functionality

Now, let's test our email functionality right on our localhost.

Onclick of the Send Email button, you should get an alert saying Please check your email to view the sent message.. You would see this if you correctly configured the project.

Preventing Abuse

When deploying your React app to production, you'll want to protect your SMTP Express credentials from unauthorised usage. SMTP Express provides custom project secrets that restrict API access to specific domains.

Creating a Custom Secret

In your SMTP Express dashboard, click on the Credentials menu.

Click Create Secret.This opens the secret creation panel on the side of the current UI you're on

Now we need to configure our Secret:

Secret Name: Enter Production Secret
Authorised Origin: Leave this field empty for now. The cloned or forked GitHub repository should be hosted on Vercel, but do not set the Vercel domain as an authorised origin yet. We will test the functionality with and without the domain set as an authorised origin to show how it affects the project.

We would have 2 tests: One without setting the domain as an authorised origin, and one with the domain set as an authorised origin. The former would fail while the latter would succeed.

NB: localhost is by default an authorised origin.

Now we have 2 Project Secrets, and this is how our UI looks at the moment

Now let's test and see the Domain Restriction in action

Testing Domain Restriction

Update your .env file with the restricted secret.

VITE_SMTP_PROJECT_SECRET=your-production-secret-here

Testing Without Adding Domain

Navigate to the public domain of your newly hosted project on Vercel or Netlify (e.g., https://[your-project-name].vercel.app/).

Now, attempt to send an email. You will see what happens when a request is made from a domain that has not been authorised.

The Result: The request was blocked, and the error message confirms this is because the domain has not been added to the list of authorised origins.

Testing With Domain Added

Now, update your Authorised Origin list in the SMTP Express dashboard. Add your Vercel or Netlify domain (e.g., https://[your-project-name].vercel.app/).

After saving your changes, return to your hosted project and attempt to send the email again.

The Result: The email will be sent and will not be blocked, as we have already added our domain (hosted on vercel) to the list of authorised origins.

Conclusion

Throughout this article, we've explored the integration of SMTP Express into React JS applications, streamlining the process of sending emails. I'm delighted that you've followed along to this point, and I encourage you not only to absorb the content but also to implement and apply what you've learned here. Happy coding!

For a hands-on experience, clone the repository and follow the detailed setup instructions to see it in action. Explore additional usage instructions in the accompanying GitHub repository: here

Lastly, if you've found value in this article, I invite you to consider sharing it with your peers who may also benefit from its insights.

What are your thoughts on the topic of Sending Emails with SMTP? Feel free to share your thoughts in the comments section below.

Authentication in React with Appwrite

Emore Ogheneyoma Lawrence — Sun, 24 Mar 2024 14:23:40 +0000

Introduction
React Project Setup with Appwrite
Building the User Interface(UI)
Set up React Context for User State Management
User Registration functionality
User Login functionality
Private Route
User Persistence
Handling User Logout
Conclusion

Introduction

User Authentication as we know it today has become very important in Web applications. Authentication is simply the process of identifying a users identity. For so long now, things like user Authentication has been handled by custom backend in applications which then sends the data to the frontend and all the magic happens, it's usually time consuming, complex and hard to grasp especially if you're not a backend developer. During the course of this article, we will implement user authentication in React web applications using Appwrite.

Appwrite is a versatile open-source backend server that offers various functionalities like authentication, database, storage, and server-side functions. It enables developers to build full-stack applications without requiring a separate backend. With Appwrite, React developers can create real-time applications effortlessly, leveraging its comprehensive set of APIs and services.

This article will guide you through implementing User Authentication using the AppWrite Auth functionality.

For this article, it's helpful to have a basic understanding of handling forms in React and familiarity with React Router. Don't worry if you're not an expert yet, you can still follow along and learn as you go!

React Project Setup with Appwrite

To initiate our project setup, the first step involves registering and creating an account with AppWrite

After registering, create a new project in appwrite by clicking on the Create a new project button. You would then see a User Interface (UI) like this:

To get started, you'll need to give your project a name. We'll use react-appwrite-auth for this example. Don't worry about the Project ID, it will be automatically generated for you when you click Next

On click of the Next button you'll be routed to a page where you'll be asked to choose your region. Choose the nearest available region for optimal performance.
Next click on the Create button, this will redirect you to your project dashboard where you'll be able to Add a platform. Since we're using React, we will go with the Web Platform

On Click of the Web Platform we are presented with a screen in the screenshot below.

These two fields are required. Set the name as React Appwrite Auth and the hostname as localhost. Alternatively, you can use * as your hostname.

We would then see two optional steps that guide us on how to Install the appwrite SDK into our app and Initialize and configure the API Key. We would come back to use them after we've successfully created our React application locally.

After these we would see the screen in the screenshot below.

Hooray! We have successfully setup our project on the Appwrite Platform.

Now, Let us create a React Project using vite. Run the following commands to create a React project.

Create a project directory named react-appwrite-auth and open it in your favorite code editor. Then run the following command that helps to scaffold(find a more simple word) a project for you.

# npm 
npm create vite@latest

# Yarn 
yarn create vite

You will then be prompted and asked to configure how you want your project to be configured. The screenshot below should direct you on what you should pick

Entering ./ as the project name in Vite scaffolds the React project in your current terminal directory. Choose React from the framework options, and select the Javascript variant.
After creating the project, npm install fetches the necessary tools and npm run dev starts a live development server for quick updates.

Now let us install Appwrite into our created React Project and configure the API keys

To install Appwrite, run the following command in the projects directory

  npm install appwrite

Next, create a .env.local file in the project root directory and paste the following

  VITE_APPWRITE_PROJECT_ID="PROJECT_ID"

To obtain your PROJECT_ID, navigate to your project created on appwrite, in our case, navigate to the react-appwrite-auth project, you will be able to see it here.
You can also navigate to the react-appwrite-auth project dashboard > settings, you will be able to see your PROJECT_ID similar to the screenshot below

Then create a appwriteConfig.js file in the src folder of your React app and paste the following code

  import { Account, Client } from "appwrite"; //  Import Client from "appwrite"

  const client = new Client(); // Create a new Client instance
  client
      .setEndpoint("https://cloud.appwrite.io/v1")
      .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID)

  export const account = new Account(client); // Export an Account instance initialized with the client

We have successfully created the Appwrite client by passing in the Project EndPoint and Project ID and then exporting the account instance that will be used later on in the project.

Building the User Interface(UI)

This section focuses on crafting UI components for our React app, prioritizing simplicity and functionality due to our authentication focus. We'll build four key components:

Login Page: Initial access point for users to input credentials and log in
Register Page: Allows new users to create accounts by providing essential details.
Home Page (Private Route): Authenticated users' exclusive space, displaying user email and ID from Appwrite.
The Navbar Component

Login Page

import { useState } from "react";
import { Link } from "react-router-dom";
import "./Login.css";

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [buttonLoading, setButtonLoading] = useState(false);

  const handleLogin = async (e) => {
    setButtonLoading(true)
    e.preventDefault();
    if (password === "" || email === "") {
      alert("Please fill in the field required")
      setButtonLoading(false)
      return
    } 

    // appwrite Login functionality 👇

  return (
    <div className="loginPage">
      <h2>Login</h2>
      <form onSubmit={handleLogin}>
        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            required
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            required
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>
        <button type="submit">{buttonLoading ? "Loading..." : "Login"}</button>

        <div>
          Dont have an account? <Link to="/register">Register</Link>
        </div>
      </form>
    </div>
  );
};

export default Login;

.loginPage > form > *:not(:last-child) {
  margin-bottom: 1rem;
}

Register Page


import { useState } from "react";
import { Link } from "react-router-dom";
import "./Register.css";

const Register = () => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const [loadingStatus, setLoadingStatus] = useState(false);

  const handleRegister = async (e) => {
    e.preventDefault();
    try {
      // Call Appwrite function to handle user registration
      if (password !== confirmPassword) {
        alert("Passwords do not match");
        setLoadingStatus(false)
        return;
      }
      if (
        username === "" ||
        email === "" ||
        password === "" ||
        confirmPassword === ""
      ) {
        alert("Please fill in all fields");
        setLoadingStatus(false)
        return;
      }

    // appwrite Register functionality 👇
    } catch (err) {
      alert(err.message);
    }
  };
  return (
    <div className="registerPage">
      <h2>Register</h2>
      <form onSubmit={handleRegister}>
        <div>
          <label htmlFor="username">Username:</label>
          <input
            type="text"
            required
            id="username"
            value={username}
            onChange={(e) => setUsername(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="email">Email:</label>
          <input
            type="email"
            required
            id="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="password">Password:</label>
          <input
            type="password"
            required
            id="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div>
          <label htmlFor="confirmPassword">Confirm Password:</label>
          <input
            type="password"
            required
            id="confirmPassword"
            value={confirmPassword}
            onChange={(e) => setConfirmPassword(e.target.value)}
          />
        </div>
        <button type="submit">{        <button type="submit">{loadingStatus ? "Loading..." : "Register"}</button>
}</button>

        <div>
          Have an account? <Link to="/login">Login</Link>
        </div>
      </form>
    </div>
  );
};

export default Register;

.registerPage > form > *:not(last-child) {
  margin-bottom: 1rem;
}

Home Page

import "./Home.css";

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <p>This page is a Protected Page and should only be seen by Authenticated Users</p>
    </div>
  );
};

export default Home;

Navbar Component

import { Link } from "react-router-dom";
import "./Navbar.css";
import { useNavigate } from "react-router-dom";

const Navbar = () => {
    const navigate = useNavigate();
    const handleLogin = () => {
        navigate("/login")
    }
  return (
    <nav>
      <div className="navLogo">Logo</div>


      <Link to="/" className="navHomeLink">Home</Link>
      <button onClick={handleLogin} className="navLoginButton">Login</button>
    </nav>
  );
};

export default Navbar;

nav {
  /* max-width: 768px; */
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid black;
}

nav > .navLogo {
  font-size: 2.5rem;
}

nav > .navHomeLink {
  font-size: 1.4rem;
}

nav > button {
  background-color: transparent;
  border: 1px solid gray;
  font-size: 1.2rem;
  cursor: pointer;
}

If you've followed the UI code snippets, you'll have a basic app that looks like this:

Set up React Context for User State Management

In your root directory, create a context folder. Inside it, add a file named UserAuthContext.jsx. Paste the provided code into this file to handle user authentication efficiently.

import { createContext, useEffect, useState } from "react";
import { account } from "../appwriteConfig";

export const UserAuthContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);

  const [isLoading, setIsLoading] = useState(true); // Track loading state

  useEffect(() => {
    const fetchUserData = async () => {
      try {
        const response = await account.get(); // Fetch user data
        setUser(response); // Set user data 
      } catch (error) {
        console.error("Error fetching user data:", error);
      } finally {
        setIsLoading(false); // Always set loading state to false after fetching
      }
    };

    fetchUserData();
  }, []);

  return (
    <UserAuthContext.Provider value={{ user, setUser, isLoading }}>
      {children}
    </UserAuthContext.Provider>
  );
};

The UserAuthContext component does the following:

Context Setup: Create a context named UserAuthContext to hold user data and related functions.
UserProvider Component: This component provides user data and loading state to the children components.
Fetching User Data: useEffect fetches user data on component mount and updates state.
Providing Context: UserProvider exposes user data, update function, and loading state.
Wrapping Your Application: Wrap your app with UserProvider to make context accessible everywhere.

User Registration functionality

Let's build the user registration functionality by adding code to our existing Register Component handleRegister function

const handleRegister = async (e) => {
    setLoadingStatus(true)
    e.preventDefault();
    try {
      // Call Appwrite function to handle user registration
      if (password !== confirmPassword) {
        alert("Passwords do not match");
        setLoadingStatus(false)
        return;
      }
      if (
        username === "" ||
        email === "" ||
        password === "" ||
        confirmPassword === ""
      ) {
        alert("Please fill in all fields");
        setLoadingStatus(false);
        return;
      }

      // appwrite Register functionality 👇
      if (password.length < 8) {
        alert("Password must contain 8 characters");
        setLoadingStatus(false);
        return;
      }

      const promise = account.create(ID.unique(), email, password, username);

      promise.then(
        function (response) {
          console.log(response); // Success
          alert("Account Created Successfully 🚀");
          navigate("/login");
        },
        function (error) {
          console.log(error); // Failure
          alert(error);
        }
      );
    } catch (err) {
      alert(err.message);
    }
  };

The updated handleSubmit function code above handles user registration with Appwrite. Here's a breakdown of its functionality

Password Validation: Checks if password length meets the minimum requirement (8 characters) and displays an error message if not.
Appwrite integration: Calls Appwrite's account.create function to register the user with provided credentials
Success Handling: Logs the successful registration response, displays a success message(alert), and redirects the user to the login page
Error Handling: Logs any errors encountered during registration and displays an error message to the user

User Login functionality

Let's build the user login functionality by adding code to our existing Login Component handleLogin function

 const handleLogin = async (e) => {
    setButtonLoading(true)
    e.preventDefault();
    if (password === "" || email === "") {
      alert("Please fill in the field required");
      setButtonLoading(false)
      return;
    } 
    // appwrite Login functionality 👇

    // Call Appwrite function to handle login with email and password
    const promise = account.createEmailPasswordSession(email, password);

    promise.then(
      function (response) {
        console.log(response); // Success
        setUser(response);
        navigate("/")
        setButtonLoading(false)
      },
      function (error) {
        console.log(error); // Failure
        alert(error.message)
        setButtonLoading(false);
      }
    );

  };

The handleLogin updated function does the following:

Appwrite Login: Uses account.createEmailPasswordSession to attempt login with email and password
Success: Logs the user data, updates the state using the setUser setter function, redirects the user to the homepage, and disables the loading indicator (setButtonLoading(false)).
Failure: In the case of a failure, it logs the errors, displays the error message as an alert, and disables the loading indicator

We have now finished the Authentication section. Let's proceed to make the Private routes

Private Routes

Go ahead to create a file named PrivateRoute.jsx and then put the following code inside it

import { useContext } from "react";
import { Outlet, Navigate } from "react-router-dom";
import { UserAuthContext } from "../context/UserAuthContext";

const PrivateRoute = () => {
  const { user } = useContext(UserAuthContext);

  return user ? <Outlet /> : <Navigate to={"/login"} />;
};

export default PrivateRoute;

The PrivateRoute component is responsible for the following:

The component utilizes the UserAuthContext created earlier to check if a user is currently logged in.
It retrieves the user data from the context using the useContext hook
If the user data exists(logged in), it renders the child component wrapped by . This allows you to define protected routes within your application and the route is only accessible by logged-in users.
If user is null (not logged in), it redirects the user to the login page(/login) using the Navigate from react-router-dom.

Now let's us use the PrivateRoute component in the App component
This is how the code will look like in our App component:

<Route element={<PrivateRoute />}>
  <Route path="/" element={<Home />} />
</Route>

This allows us to simply use PrivateRoute component we've just created.
The Home component which is a child component of the PrivateRoute component appears if and only if the userobject is not null

User Persistence

User persistence refers to holding user data even when the page is refreshed. This ensures that the user remains logged in or their preferences remembered even after a browser refresh or session termination.

Appwrite by default uses Local Storage for session management on Registering and Logging in users into our React applications

On refresh of the Home Page, the application is routed to the Login page as the data from the UserAuthContext hasn't been fetched yet.
To prevent this, let us add this piece of code to the Login page above the handleLogin function that checks and redirects the users back to the Home page if the user object is not null or empty

import { useState, useContext, useEffect } from "react";
import { Link } from "react-router-dom";
import "./Login.css";
import { account } from "../appwriteConfig";
import { useNavigate } from "react-router-dom";
import { UserAuthContext } from "../context/UserAuthContext";

const Login = () => {
  const { setUser, user } = useContext(UserAuthContext)
  // console.log(user);
  const navigate = useNavigate();
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [buttonLoading, setButtonLoading] = useState(false);

  useEffect(() => {
    if(user !== null){
       navigate("/");
    }
  }, [user, navigate])

  const handleLogin = async (e) => {
    // Login logic. See above sections
  };

The useEFfect() hook simply checks if the user is not null. If this evaluates to true, then the user is routed to the / or Home page.

Handling User Logout

We would handle the User Logout in the Navbar component already created.

const Navbar = () => {
  const { user, setUser } = useContext(UserAuthContext);
  const navigate = useNavigate();

  const handleLogin = () => {
    navigate("/login");
  };

  const handleLogout = async () => {
    try {
      await account.deleteSession("current");
      setUser(null);
      navigate("/login");
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <nav>
      <div className="navLogo">Logo</div>

      <Link to="/" className="navHomeLink">
        Home
      </Link>
      {user ? (
        <button onClick={handleLogout} className="navLoginButton">
          Logout
        </button>
      ) : (
        <button onClick={handleLogin} className="navLoginButton">
          Login
        </button>
      )}
    </nav>
  );

In this Updated Navbar component, we are doing the following:

Conditional Rendering: We are conditionally rendering the Login and Logout buttons based on the current user value
Login: On click of the Login button, the user is routed to the /login page
Logout: On click of the Logout button, the handleLogout() is triggered. The current user session is then deleted and the user is changed to null using the setter function setUser(null). The user is then routed to the /login page.

Here's a demo of how the app looks like:

Conclusion

In this article, we've explored and seen how to Authenticate users in our React apps using Appwrite. I'm delighted that you've followed along to this point.
Here is the github repo for this article incase you need to check it out, here

Lastly if you've found value in this article, please consider sharing it with your peers who may also benefit from it.

What are your thoughts on the topic of Authentication in React with Appwrite? Feel free to share your thoughts in the comments section below.

DEV Community: Emore Ogheneyoma Lawrence

Understanding and Using the "as const" Keyword in Typescript

Table of Contents

Introduction

Understanding the as const keyword

Conclusion

How I Am Approaching Developer Relations at SMTP Express

Why I am Choosing SMTP Express

What I Have Done So Far

What's Next?

Learning path

Conclusion

How I Am Approaching Developer Relations at SMTP Express

Why I am Choosing SMTP Express

What I Have Done So Far

What's Next?

Learning path

Conclusion

An Introduction to DevRel Foundations

How is DevRel Now?

Fields of DevRel

1. Developer Advocacy

2. Developer Experience

3. Developer Marketing

4. Community Management

5. Developer Education

6. Ecosystem/Integration

Other DevRel Fields Worth Mentioning

1. Internal DevRel

2. Open Source DevRel

3. Build-in-Public

Pillars of DevRel

a. Education

b. Advocacy

c. Community

Starting My DevRel Journey with DxMentorship: How Technical Writing Led Me Here

Our First Session (Kickoff Session)

The Kickoff Session

Enhancing Form User Experience with CSS: Real-Time Feedback Techniques for Better User Interaction

Table of Contents

Introduction

Prerequisites

CSS Pseudo-Classes for Real-Time Feedback

Conclusion

How to Use JavaScript's structuredClone() for Deep Object Cloning

Table of Content

Introduction

Understanding and using structuredClone()

Conclusion

CSS Fluid Typography: A Guide to Using clamp() for Scalable Text

Table of content

Introduction

Using Clamp() Function to Achieve Fluid Typography

Conclusion

Upgrading Supabase's Email Rate Limits in User Registration: A Practical Guide"

Table of Contents

Introduction

Prerequisites

What is Supabase and Setting up the Supabase Project

Integrating Supabase with React JS

Exploring the Email Rate Limit Issue

Implementing the Solution

Conclusion

Sending Calendar Invites with React and SMTP Express

Table of Contents

Introduction

Sending Calendar Invites Functionality

Conclusion

Send Emails in your React JS App with SMTP Express

Table of Contents

Introduction

Prerequisites

What is SMTP Express

Project Setup

Creating Email Form

Installing SMTP Express SDK

API Key Integration

Getting Your API Credentials

Using Environment Variables

Handling Form Submission