Forem: Hugo Ramon Pereira

How to Manage User Authentication in React.js, Next.js, Vue.js, and Nuxt.js Using Clerk

Hugo Ramon Pereira — Tue, 01 Oct 2024 00:21:14 +0000

INTRODUCTION

Authentication is a very important component to any software, application, system, it provides an extra layer of security by restricting areas of your application. For example a dashboard with important information, it can not be accessed unless the user is authenticated. Of course we can implement user, email and password for the user to create and then the user receives an email to validate the email and only then the user can access the content which is allowed for the ones authenticated, this flow is still very popular in use, but it has additional steps that many users are somewhat bored to take, since authentication with a provider be it Google, Microsoft, Apple or others is much simpler, with just a few clicks you can get authenticated and you don't even have to leave the current screen you are in. This ease of access should definitely be considered when building your applications so that the user can choose which one he wants.

In this article we will use Clerk with React.js and Next.js, unfortunately Clerk is not fully supported for Vue.js or Nuxt.js applications yet, in the Clerk's official docs we can find mentions for Vue.js but to use it via SDK.

CLERK WITH REACT.JS

The first step is to log into Clerk's website and choose the providers you want to be available in your application. You can choose up to 3 providers in the free-tier, if you wish to have more providers then you will need to upgrade your account.

The second step to add it to a React.js application is quite simple. First we need to install the clerk package:

npm install @clerk/clerk-react

Then we need to set up our environment variables, first check if you already have a env.local file to add the key there, in case you don't have this file you can go ahead and create it to add the clerk publishable key, as follows:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_************************

The next step is to import the publishable key, we can do this by going to the main.ts file and import it there, you can also add a if check to avoid Typescript errors.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Now we have to add the to our application also in the main.ts file but now we have to wrap the whole app with the as shown below and attach the publishableKey to it:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { ClerkProvider } from '@clerk/clerk-react'

// Import your publishable key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
      <App />
    </ClerkProvider>
  </React.StrictMode>,
)

Now the final step is to add the Clerk Components in the header component to handle the authentication steps such as sign in, sign out, the button with the Authenticators we choose during the process like Google, Microsoft, Github, Apple and many others available. You can organize your Header component the way you want just import the components from Clerk and it should work.

import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/clerk-react'

export function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  )
}

And don't forget to add the package React-Router-Dom to navigate to whatever the page is after the user is authenticated.

CLERK WITH NEXT.JS

To add Clerk to a Next.js application the steps are almost identical, just a few changes, let's see how to do that.

First log into Clerk's website with your account and select the providers and proceed to add the publishable key and remember that Next.js has a different naming convention for its environment variables.

And using Next.js requires 2 values to be added in the environment file, a secret key is added in Next.js a publishable key and a secret key:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_************************
CLERK_SECRET_KEY=sk_test_************************

Next step is to add a middleware to intercept routes for unauthenticated users, you can create a file named middleware.ts in the root directory. Then this is the code to make it validate routes and force authentication by using the functions auth() and protect() provided by Clerk:

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/forum(.*)'])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
}

And now we are going to add to our main layout.tsx file wrapping the entire application and make Clerk globally available.

import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import './globals.css'
import Header from '@/components/Header';


export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          <Header />
          <main>{children}</main>
        </body>
      </html>
    </ClerkProvider>
  )
}

And now we add our Header component and use Clerk components:

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

export function Header() {
  return (
    <header>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </header>
  )
}

CLERK WITH VUE

In order to add Clerk to a Vue.js application we are gonna need to use the Clerk's SDK. And the process is very simple, this is one of the benefits of using Clerk, its simplicity.

Install the SDK into your project by using the command:

npm install vue-clerk

Add the publishable key to your project, unlike Next.js, for Vue.js and React.js there is only one key to be added to the .env.local file:

VITE_CLERK_PUBLISHABLE_KEY=pk_test_************************

Then import the Clerk publishable key in the main.ts file into the src folder:

import { createApp } from 'vue'
import App from './App.vue'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const app = createApp(App)
app.mount('#app')

Add clerkPlugin from vue-clerk

import { createApp } from 'vue'
import App from './App.vue'
import { clerkPlugin } from 'vue-clerk'

const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Missing Publishable Key')
}

const app = createApp(App)
app.use(clerkPlugin, {
  publishableKey: PUBLISHABLE_KEY
})
app.mount('#app')

Now create your header component and make use of the Clerk pre-built components:

<script setup>
     import { SignedIn, SignedOut, SignInButton, UserButton } from 'vue-clerk'
</script>

<template>
  <SignedOut>
    <SignInButton />
  </SignedOut>
  <SignedIn>
    <UserButton />
  </SignedIn>
</template>

And use vue-router to navigate to the authenticated pages when the user is done authenticating.

CLERK WITH NUXT.JS

Nuxt.js applications require the use of Vue-clerk to and some additional steps in order to make Clerk work with Nuxt.js architecture. It's a different process just like with Next.js because both technologies have similar purposes.

In the nuxt.config.ts we add the module vue-clerk/nuxt into the modules array and by doing so all the components and composables will be auto-imported

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
})

And now the environment variables are added in your environment file:

NUXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_publishable_key
NUXT_CLERK_SECRET_KEY=your_secret_key

The environment variables will be loaded in the nuxt.config.ts file using the runtimeConfig and beware the naming conventions they must match the NUXT_PUBLIC_YOUR_ENV and the runtimeConfig object otherwise we might run into inconsistencies between the dev and build environment.

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
  runtimeConfig: {
    public: {
      clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
    },
  }
});

Now the next step is to use Clerk Components in for example a Header component and use it.

<script lang="ts" setup>
// You don't have to import anything from  Clerk
</script>

<template>
  <div>
    <SignIn />
  </div>
</template>

We also have to protect the routes that need authentication and if the user is not authorized he will be redirected to a home page or wherever we want.

// middleware/auth.ts
import { defineNuxtRouteMiddleware, navigateTo } from '#app';
import { useClerk } from '@clerk/clerk-vue';

export default defineNuxtRouteMiddleware(() => {
  const clerk = useClerk();

  if (!clerk.user.value) {
    return navigateTo('/sign-in');
  }
});

Next step is to add types to make sure Clerk works with Typescript. Since we are using SDKs for Vue.js and Nuxt.js it is not necessary to install the package @clerk/types because the SDKs include their own type definitions. You can read the file in the repository to be certain of what the exact types are.

import { UserResource } from '@clerk/types';

// Example function using Clerk's user type
function getUserName(user: UserResource) {
  Return { 
user.firstName || 'Guest', 
user.emailAddresses; 
  }
}

The only thing that is left is to enable typescript module for building the application to be later deployed into production.

export default defineNuxtConfig({
  modules: ['vue-clerk/nuxt'],
  clerk: {
    appearance: {},
  }
  runtimeConfig: {
    public: {
      clerkPublishableKey: process.env.CLERK_PUBLISHABLE_KEY,
    },
  }
  buildModules: ['@nuxt/typescript-build'], // Enable TypeScript
});

CONCLUSION

Authentication with Clerk is very simple and easy, now you can add it to your projects and have another option for your users to choose and this will be better for User Experience.

REFERENCES

https://clerk.com/docs/quickstarts/react

https://clerk.com/docs/quickstarts/nextjs

https://vue-clerk.vercel.app/

https://clerk.com/docs/references/react/use-clerk

https://github.com/wobsoriano/nuxt-clerk-template/tree/main

https://www.vue-clerk.com/guides/nuxt

https://www.npmjs.com/package/@clerk/types

https://github.com/clerk/javascript/blob/e483037f61b4cfa8a04be27971f3b09eb88c84ac/packages/types/src/user.ts#L52

Protected Routes with React.js and Next.js

Hugo Ramon Pereira — Fri, 17 Nov 2023 19:00:03 +0000

Introduction

In order to handle routes in React.js we have to install a third party package named React-Router-Dom. This package wasn't developed by the React core team but it is a trusted package in React's community.

So this article aims to show ways to implement routes that can only be accessed when the user is somehow authenticated or authorized to have access to specific pages of our applications.

Creating Protected Routes with React.js

We will start with React.js and the first thing we need to do is to install React-Router-Dom:

npm i react-router-dom
yarn add react-router-dom
pnpm add react-router-dom

We will be creating a router.ts file and for that we need to change the structure of our app a bit.

The first step is to create the router file and for that we will create a folder called router inside the src directory. I am following the naming convention to name all the component files as index.tsx.

In the router file, first we need to create a functional component named as Router and import 3 components from the package React-Router-Dom, Browser Router, Routes and Route.

We will create three pages and so we will have three routes as well.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthGuard } from '../auth/AuthGuard';
import { Signin } from '../view/pages/signin';
import { Signup } from '../view/pages/signup';
import { Dashboard } from '../view/pages/dashboard';

export function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/signin' element={<Signin />} />
        <Route path='/signup' element={<Signup />} />
        <Route path='/' element={<Dashboard />} />
      </Routes>  
    </BrowserRouter>
  );
}

The order is to have the BrowserRouter wrapping all the Routes and inside the Routes we have the specific Route file with its path and the element which is the component of the page, they are imported in the first lines of the router component.

The pages/components rendered as elements of each Route are created in the View folder and inside that we have a folder for each page/component.

The second step is to go to the App.tsx file and use our Router component there.

import { Router } from './router';

export function App() {
  return (
    <Router />
  );
}

export default App;

And now we will create the AuthGuard component that is going to protect the routes and allow us to access the dashboard page/component only after we are signed in. As a good practice we will create a folder called auth and create the AuthGuard component there.

import { Outlet, Navigate } from 'react-router-dom';

interface AuthGuardProps {
  isPrivate: boolean;
}

export function AuthGuard({ isPrivate }: AuthGuardProps) {
  const signedIn = false;

  if (!signedIn && isPrivate) {
    return <Navigate to='/signin' replace />;
  }

  if (signedIn && !isPrivate) {
    return <Navigate to='/' replace />;
  }

  return <Outlet />;
}

In the AuthGuard component we are using two components from React-Router-Dom. Outlet which is placed in the parent route and it will render the child routes, the Outlet component will be very useful because we will be using nested routes. And the Navigate component is the one responsible for redirecting us to the specified route, the property called replace which will not add your current path to the history.

We created a simple interface that contains only one single prop called isPrivate and we will use this prop to control if the route requires the user to be authenticated or not.

We have the logic that controls where we will be redirected whether the user is signedIn or the route is private or not and at the end of the component we return the Outlet component.

We can also create another AuthGuard that requires a token from localStorage, in case we wish to implement a different approach.

import { Navigate } from 'react-router-dom';

interface AuthGuardProps extends PropsWithChildren;

export function AuthGuard({ children }: AuthGuardProps) {
  if (localStorage.getItem('token')) {
    return children;
  }

  return <Navigate to'/' />;
}

So now we head back to the Router component and we will use the AuthGuard to wrap our Routes with it and establish which one is private or not. And the Route that will be wrapped by the AuthGuard is the one that will be rendered by the Outlet component. Since the AuthGuard is the parent because it is wrapping the child route, thus making nested routing.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthGuard } from '../auth/AuthGuard';
import { Signin } from '../view/pages/signin';
import { Signup } from '../view/pages/signup';
import { Dashboard } from '../view/pages/dashboard';

export function Router() {
  return (
    <BrowserRouter>
      <Routes>

        {/* Public Routes */}
        <Route element={<AuthGuard isPrivate={false} />}>
          <Route path='/signin' element={<Signin />} />
          <Route path='/signup' element={<Signup />} />
        </Route>

        {/* Private Route - Require Authentication */}
        <Route element={<AuthGuard isPrivate />}>
          <Route path='/' element={<Dashboard />} />
        </Route>

      </Routes>  
    </BrowserRouter>
  );
}

This is the same code as earlier, but now we have our AuthGuard component wrapping the routes, we are passing the boolean prop isPrivate to indicate which ones are private or public and in the AuthGuard component we are returning the Outlet component which will render the route that is being wrapped by the AuthGuard.

This is a very simple but efficient implementation, easy to read and not that many lines of code.

Creating Protected Routes with Next.js

For a Next.js application we will use a different approach since Next.js handles the routes itself with the Pages Router system where you can create a file named page and it will become an available route, there's no need for a third-party package like React-Router-Dom.

We will start in the main Layout file, in there we will wrap the children inside the body with two components: AuthProvider and ProtectRoute, the AuthProvider is a context created in the contexts folder, the code is as follows:

'use client';

import { 
  useState, 
  useEffect,
  useContext,
  createContext,     
  PropsWithChildren
} from "react";
import useLocalStorage from "../hooks/useLocalStorage";

interface AuthProviderProps extends PropsWithChildren{};

interface SessionProps {
  access_token?: string;
};

interface ContextProps {
  session: SessionProps;
  isSignedIn: boolean;
  isLoading: boolean;
};

const AuthContext = createContext<ContextProps>({
  session: {},
  isSignedIn: false,
  isLoading: false
});

function AuthProvider({ children }: AuthProviderProps) {
  const [session, setSession] = useState<SessionProps>({});
  const [isLoading, setIsLoading] = useState<boolean>(true);
  const isSignedIn = !!session && !!session?.access_token;
  const storage = useLocalStorage();

  useEffect(() => {
    try {
      const sessionStorage = storage.getItem('session') as SessionProps
      setIsLoading(true);

      if (sessionStorage.access_token) {
        setSession(sessionStorage);
        return;
      }
      setSession({});
    } catch (error) {
      setSession({});
      setIsLoading(false);
    } finally {
      setIsLoading(false);
    }
  }, [storage]);

  return (
    <AuthContext.Provider value={{ session, isSignedIn, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

export default AuthProvider;

In the context we make use of a custom hook called useLocalStorage( ) to separate the logic for basic operations using the localStorage property, getItem, setItem, clear.

And we are using a third-party package called React-Secure-Storage to encrypt and decrypt the data stored in localStorage.

First, let's download the package and then we start building the custom hook.

npm i react-secure-storage
yarn add react-secure-storage
pnpm add react-secure-storage

'use client';

import secureLocalStorage from 'react-secure-storage';

function useLocalStorage() {
    const storage = secureLocalStorage;

    function setItem<T>(key: string, value: T){
        storage.setItem(key, value as number | string | object | boolean);
    }

    function getItem(key: string): string |number | object| boolean | null{
        return storage.getItem(key);
    }

    function clear(){
        storage.clear();
    }

    return {
        getItem,
        setItem,
        clear
    };
}

export default useLocalStorage;

And now we will create the component ProtectRoute. This component will have a function that will determine if the routes are public by using the values provided in the variable publicPages and the hooks from next/navigation usePathname and useRouter. We are also using react-hot-toast which is another third-party package to display toast success, error, warning toast messages throughout our application.

To install it we use the following command:

npm i react-hot-toast
yarn add react-hot-toast
pnpm add react-hot-toast

'use client';

import { useAuth } from '@/app/contexts/auth';
import { usePathname, useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { toast } from 'react-hot-toast';

interface ProtectRouteProps {
  children: React.ReactNode;
}

const publicPages = ['/', '/signup'];

function ProtectRoute({ children }: ProtectRouteProps) {
    const { isSignedIn, isLoading } = useAuth();
    const route = useRouter();
    const pathname = usePathname();

    useEffect(() => {
        if (isSignedIn || isLoading || publicPages.includes(pathname)) return;

        route.replace('/');
        toast.error('User not authorized!');
    }, [isSignedIn, isLoading, pathname, route]);

    if(isLoading){
        return (
            <div>
                <center>
                    <span>Loading...</span>
                </center>
            </div>
        );
    }

    if (isSignedIn || publicPages.includes(pathname)) {
        return children;
    }
    return null;
}

export default ProtectRoute;

Well, I showed two ways of implementing the protection of routes, there are many more different ways, some simpler, some more verbose or performant, but the point here is to say that sooner or later you will end up needing to protect routes in your application due to the authentication flows that most application needs, the goal of this article is to share these two examples, so that you can make some tweakings to adapt and make it suitable for whatever need you may have.

References

https://reactrouter.com/en/main

https://react.dev/reference/react

https://nextjs.org/docs/pages/building-your-application/routing

https://www.w3schools.com/react/react_router.asp

Deploying your application on AWS

Hugo Ramon Pereira — Sat, 04 Nov 2023 00:30:02 +0000

Introduction

Lately, the usage of Cloud Computing has been rising a lot, so these skills are essential and required by companies. In this article, I will show you how to configure and deploy your application to AWS which is the most used Cloud Provider. We will be using S3 (Simple Storage Service), CloudFront, Route 53 and a React.js application.

Creating your AWS account or accessing your existing one

The first thing we need to do is to create a new AWS account if you don't have one, because we will need to use the AWS Management Console to host and deploy our app. And it is necessary to add a valid credit card. AWS offers many free tiers but the cost will be very low if there are any costs.

Using a valid Domain- DNS

A domain will be necessary for us to have a well-structured website and avoid having as the URL an AWS hash or a strange set of characters as the address of our application.

Storing Static Files in S3

The second thing we need to do is to generate the build of the application that we want to deploy and by doing that we will have the static files to be added to the bucket in Simple Storage Service - S3. When a build is generated HTML, CSS, Javascript files, images and others are examples of static files that we will be storing in the S3.

Beware if you have a Next.js application and you are using Static Site Generation, in case you have Server-Side Rendering you will not have these static files generated in the build.

We are storing these static files to avoid the need of having a server serving static files, and users making requests to get those static files, if we were to follow this approach we would have to configure a load balancer, horizontal and vertical scaling, auto-scale and other things only to handle the serving of static files.

Creating your bucket

First, we need to give our bucket a name.

First, we need to give our bucket a name.
There are some naming conventions to be followed.

When selecting the AWS Region we have to be aware that the prices differ from region to region and also your location matters.
Below the select for AWS Region, we have the option to copy settings from an existing bucket but since we are creating our own we don't have to do anything there, it's optional by the way.
Object Ownership we can leave ACLs (Access Control List) disabled because the content of our bucket will be ours only, there will be no content that belongs to another AWS account.

Our bucket is ready, now just click on the button to create the bucket and we are done in this part.

After clicking on the Create Bucket button you will be redirected to the Buckets page and the bucket with the name you gave should appear there. Just click in the bucket to go to another page where we will be uploading our static files.

Now we go to the Buckets page and there we can create or edit an existing bucket.

Let's assume we are creating one bucket and it is empty of course, we can click on the upload button to add some static files to it.

After doing this, you have to wait for the files to load and for now, we are done with the Buckets.

Creating our Distribution using CloudFront

Once our files are uploaded in the bucket we need to make these files available to the world and that is when a CDN (Content Delivery Network) comes into play, CloudFront is the name of the service we are talking about. The PoP (Point of Presence) or Edge Locations are spread across the globe and they are responsible for providing faster access to the content by fetching them in the AWS Region we selected earlier, this reduces latency and stores the content in cache for faster access.

Let's create our first distribution:

The Origin domain is the source of data and our source of data is our S3 Bucket, AWS is intelligent enough to detect it for us, when you click the input a list of buckets and other assets you have in AWS will be listed for you.
When you select a source of data it will fill the first and third inputs and the second which is the Origin path is optional we can skip that for now.
The next part is the Origin access control settings and now we have 3 options:

We will be selecting the second option which is the one recommended by AWS. Our bucket was configured to block all public access but by selecting this option we restrict it to CloudFront only.
When you select the second option some fields will appear below:

If this is your first contact with AWS you will not have an origin access control, you will have to create a control setting in the button.

When the button is clicked a modal will appear with the following options. It will come with some options and you can leave it as it is and click on create.

Now scrolling down the page we will have Additional settings and we can also leave it as they are:

Now we can configure the Default cache behavior:

It is advisable to leave the compressed objects automatically selected. For the Viewer, I like to leave Redirect HTTP to HTTPS selected but you can restrict it to HTTPS only or as you wish.
The allowed HTTP methods are selected GET and HEAD because this is a CDN configuration and we are only gonna be making requests to fetch data because our deployment is a simple one, but in case your project is a big one you must consider other options as well.
The cache settings below can be left as it is, we have caching optimized which is recommended for S3.

The next options are WAF (Web Application Firewall) and in this case, we do not need it, if you enable some additional cost will come with it. Check the pricing below:

For the other settings, we will be walking through all of them.

We will be selecting the option to use all edge locations which will result in faster loading of the content, a few cents more expensive but if you have metrics that identify where most of your traffic comes from, feel free to check the Edge Locations closer to where you and your clients are.

Adding your own domain

In case you don't associate your domain to it, AWS will generate a hash to be used as your URL address which is not good to have a strange set of characters.

To wrap up the creation of our CDN in CloudFront we should select HTTP/2 and HTTP/3, HTTP/3 offers, a faster handshake and it is used by the most modern browsers.

The default root object is the file that will be accessed in case one of our users accesses our URL address with '/' we need to tell AWS what file it must read to render the initial page.

Now we have our CloudFront CDN up and running, but we still need to make some configs, like adding the S3 bucket policy.

It is highlighted in the yellow section. When you click the button to copy the policy, if you paste it somewhere you will see that it is a JSON file containing some info.

What we need to do is to click on the link and it will redirect to the page where you need to add the JSON file containing the policies.

We just need to paste the JSON and save the changes and that's it.

After saving we will have our distribution ready to be used and our application can be accessed using the domain name provided by CloudFront.

Now your application is hosted in AWS. But we need to use our domain and to do that we need to use Route 53.

Creating a hosted zone with Route 53

First, let's access the Route 53:

Then, all you have to do is enter your domain in the Domain name input, but first, you need to have a domain and remember not to add www, it's just the domain itself and after that click the button create hosted zone and that is it.

After the creation of your hosted zone, you need to add the Name servers to the website where you purchased your domain. AWS will give you 4 Name servers and in your website domain you might have only two servers to add, there must be a plus icon to add more and that is what you have to do in the Route 53 section.

Now you have to wait a couple of hours for the propagation to happen and when it is finished you have to head back to CloudFront to configure the CNAME, because earlier we left it blank and now that we have our hosted zone.

Now the final step is to go to the distribution we created earlier in CloudFront and click on the settings edit button.

We added 2 domain names so that our users can access it with or without the www at the beginning of the URL address.

Congratulations! You have successfully deployed your website to AWS with a custom domain using an S3 bucket (Simple Storage Service), a CDN (Content Delivery Network) **CloudFront** and Route 53.

References:

https://docs.aws.amazon.com/s3/#amazon-s3
https://aws.amazon.com/cloudfront/getting-started/
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/Welcome.html

Setting up React Query in your React project

Hugo Ramon Pereira — Thu, 26 Oct 2023 16:02:36 +0000

Introduction

Consuming data from an API or some sort of external source is always necessary throughout our applications and the traditional method using fetch API and the useEffect hook is a bit verbose, time-consuming and not advised. Axios emerged as a solution for that and currently, Axios is still dominant in use.

This is where React Query comes into play, React Query is responsible for managing asynchronous operations between server and client and it gives us many advantages.

So for this article, we will be talking about React Query v5 with Axios to provide an excellent combination of technologies, so that you can handle your requests, data fetching, asynchronous state handling, caching, garbage collection, memory management, refetching, loading states, react query dev tools and some examples.

Installation

npm i @tanstack/react-query
yarn add @tanstack/react-query
pnpm add @tanstack/react-query

React-Query setup

After installation, the first thing we need to do in our React.js application is to wrap our entire application with QueryClientProvider and pass a client prop to it. Now React-Query is ready to be used.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  );
}

We can also pass some initial properties to the Query Client:

React-Query DevTools - Optional

You can also install React-Query DevTools. React-Query Dev Tools will help you visualize data and everything that is going on and it is a tool that will give you important info to help you debug your application.

We have to install it since it is a separate package provided by Tanstack.

Here's how to install it:

npm i @tanstack/react-query-devtools
yarn add @tanstack/react-query-devtools
pnpm add @tanstack/react-query-devtools

Now let's configure React-Query DevTools in our application, we can pass it inside the QueryClientProvider as a sibling of the main component . We can also pass 3 properties to define the position of the Icon that triggers the panel and the DevTools Panel itself.

initialIsOpen - If you pass this then DevTools is going to be open by default
position - The panel position, top, bottom, left or right
buttonPosition - The position of the button that opens the panel, possible values are: top-left, top-right, bottom-left, bottom-right.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools 
         initialIsOpen 
         position='right'     
         buttonPosition='bottom-right' 
      />
    </QueryClientProvider>
  );
}

Implementation

With the initial configurations out of the way, we can now start using it for real.

The basics of React Query are 2 things, query and mutation. Query is when we fetch data from somewhere and mutation is when data is changed, this change can happen for several reasons, an update, data has become stale, a post, a put, patch request and React-Query will handle that for us.

To handle the requests to the API in this article we will be using Axios, to install it follow the steps:

npm i axios
yarn add axios
pnpm add axios

I created an API configuration file to make requests to jsonplaceholder api to bring a list of the posts.

import axios from 'axios';

const todosApi = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com'
});

export async function getTodos () {
  const response = await todosApi.get('/todos');
  return response.data;
}

export async function addTodo (todo) {
  const response = await todosApi.post('/todos', todo);
  return response.data;
}

export async function editTodo (todo) {
  const response = await todosApi.patch(`/todos/${todo.id}`, todo);
  return response.data;
}

export async function removeTodo ({ id }) {
  const response = await todosApi.delete(`/todos/${id}`, id);
  return response.data;
}

export default todosApi;

And I created a TodoList component where we will combine the code using Axios and React-Query.

import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
import { getTodos, addTodo } from '../../api/api';

export default function TodoList() {
  const queryClient = useQueryClient();

  const { data, isLoading,  } = useQuery({
    queryKey: ['todos'],
    queryFn: getTodos
  });

  const { mutateAsync } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    }
  });

  if (isLoading) {
    return <p>Loading posts...</p>;
  }
  return (
    <main>
      <h1>Todo List</h1>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>
            {todo.title}
          </li>
        ))}
      </ul>;

      <button onClick={() => {
        mutateAsync({
          id: Math.random(),
          title: 'Finish article'
        });
      }}>
        Add todo
      </button>
    </main>
  );
}

If we weren't using React-Query we would have to create, loading states using useState, handle the errors, caching, as you can see in the image below:

As said before React-Query works with 2 concepts query and mutation and React-Query provides the hooks useQuery( ) and useMutation( ) for us to handle our asynchronous operations between Frontend and Backend.

The hook useQuery is used to fetch data and to do that we import those functions created in the API code previously provided. We are importing both code from React-Query and also the API that is using Axios.

When we use the hook useQuery( ) is common to pass an object with a queryKey which can be any name you want but it should be related to what sort of operation is being done to be more semantic, in our case we named it 'todos' because that is exactly what we are dealing with, we are fetching a list of todos. React-Query will handle cache, memory optimization, garbage collection and other things with this value.

We also pass a queryFn which is the function that will execute the request which in our case is being done by Axios.

const { data, isLoading } = useQuery({
    queryKey: ['todos'],
    queryFn: getTodos
});

In the code above the getTodos function is in the api file and it was imported into this component to be used here with React-Query. And to have access to the posts fetched all we have to do is map through the data which is the first value destructured and now we have all the posts in a li tag.

<>
  <h1>Todo List</h1>
    <ul>
      {data.map((todo) => (
         <li key={todo.id}>
            {todo.title}
         </li>
      ))}
    </ul>;
</>

We don't have to create states [isLoading, setIsLoading] because all of that and much more is already built-in and provided by React-Query.

if (isLoading) {
  return <p>Loading posts...</p>;
}

As for the operations that will involve changes in the data, we will use the hook useMutation( ).

We can destructure many props from useMutation( ) and pass an object to it as in the useQuery( ) hook. But now we pass a mutationDn which is the function that will change data, it can be a request to the api or something.

We can also pass a callback function to onSuccess, onError to handle the success or error cases of the request.

const { mutateAsync } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] });
    }
});

We can use the mutateAsync function that was destructured and use it in a button to be triggered via onClick( ) or something.

<button onClick={() => {
   mutateAsync({
      id: Math.random(),
      title: 'Finish article'
   });
}}>

Conclusion
There are tons of other things that can be done with React-Query, we only scratched the surface here. To have more details and further info you can always turn to the official docs that will be provided below.

React-Query is a very powerful technology and you should use it in your projects along with Axios, you will have a powerful combination of tools to handle a lot of things that you would have to do by yourself, many useStates and useEffects can be avoided by using React-Query properly.

References
https://tanstack.com/query/v5/docs/react/overview

https://axios-http.com/

Server Components: React.js and Next.js

Hugo Ramon Pereira — Thu, 19 Oct 2023 18:42:08 +0000

What are Server Components?

RSC - React Server Components is an architecture model developed by the React team, this concept was introduced in December 2020 but this is nothing new, other programming languages like PHP, Python, Ruby and others already had content rendered on the server side, in summary, this is the main goal, to be able to render components on the server. There is a layer that pre-renders a large blob of static HTML content to avoid unnecessary usage of Javascript which is achieved by caching what needs to be rendered in the server. This happens using React Streaming which can be implemented using the new method renderToPipeableStream and React Suspense.

What benefits do they bring?

In React applications, Server Components exclude your Javascript from the bundle which allows us to fetch static content during the build and also read data without having to build the API, this scenario favors users with slower devices or network connections. React introduced async / await as the main way to fetch data from the server discarding the need to use the hook useEffect( ) for example, check the code below to see a request being made to the still using the hook useEffect( ) to fetch data from the API jsonplaceholder.typicode.com:

'use client'

import React, { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts/')
      .then((response) => response.json())
      .then((data) => {
        setData(data);
      })
  }, []);

  return (
    <div>
      {data.map(post => (
        <div>
          <h1>{post.title}</h1>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

In the case of a Next.js application, all components are server components by default, if we wish to turn a specific component into a client component we have to use the flag ‘use client’ at the top to indicate that it is a server component and also a client component and with the ‘use client’ directive we can use hooks in the component.

export default async function Home() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await response.json();

  return (
    <>
      <ul>
        {posts.map(post => (
          <div>
             <h1>{post.title}</h1>
             <p>{post.body}</p>
          </div>
        ))}
      </ul>
    </>
  )
}

Both codes displayed above will return the same content, a bunch of posts fetched from the API jsonplaceholder.typicode.com, but in the second example we have less lines of code and a code easier to read and grasp.

React server components help improve the performance of applications with code splitting, with lazy loading that hydrates only what is needed and it results in a bundle size being zero size and the SEO is great due to the fast loading of the page.

What are the downsides?

The server-only rendering on the server side is another environment and we will need to be more cautious about hydrations, what renders on the server must match what is hydrated on the client, if the content doesn't match then it will result in hydration errors.

Conclusion

Seeing that we have faster page loading, SEO, bundle size reduced, Code splitting, Streaming, Lazy loading, Suspense and other benefits, it's fairly recommended to use server components throughout our applications, and knowing when to use them is key to having better applications always aiming to provide our clients with the best experience they can get.

References

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components

https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

https://www.patterns.dev/posts/streaming-ssr

Writing your own Custom Hooks

Hugo Ramon Pereira — Tue, 17 Oct 2023 13:47:56 +0000

Introduction

Since 2019 when React.js core team launched the version 16.8 with the React Hooks, a lot has changed ever since. Hooks have significantly improved the way we write code with React.js.

Now we can manage the state in a cleaner and leaner way, handle side effects, avoid unnecessary re-renders, improve performance and the list goes on and on…

But what are React Hooks?

Hooks are functions that were built to help us manage the lifecycle of Functional Components. We still have the Class-based Components but we cannot use hooks with Class-based Components. All hooks have to start with the word use by the way.

Now let’s take a look at 2 example of hooks before we write our own:

useState( )

The useState Hook allows you to manage a state variable and a function to update the value of this variable and reflect in the component it is being used.

States are data that is being used in our components and we need to keep track of the changes these data suffers so that React can update and re-render the component to display this new data.

In the code above we have the name state variable having empty strings as default value, which is passed at the execution of useState and setName function.

We created an auxiliary function to use setName and get the input value and we are using onChange to watch for that and the as the value of the input we used the name to bind it to our state.

useEffect( )

The useEffect Hook allows you to execute actions we call side effects in your components manipulating the lifecycle of our components. We use the useEffect hook to fetch data from an API or some other source of data, update the DOM, and timed tasks, the effects will execute when the page is first loaded or when we specify a dependency in the dependency list.

useEffect( ) takes 2 arguments: a function and a dependency as mentioned above. useEffect will be observing this dependency and when it does change then the actions we specified in the first argument, which is a function will execute.

We can specify no dependency in the dependency list or array and if we do so, then the useEffect hook will be executed only once, when the page is loaded for the first time and this behavior is what the ComponentDidMount used to do in previous versions of React.js.

In the example above the dependency list which is the empty array has no dependencies, we can add dependencies or not.

useState and useEffect are the 2 most used React hooks and now I will introduce you to Custom Hooks:

Custom Hooks

Hooks are reusable functions. React.js provides a list of Hooks, you can make a research and see if one of them suits your needs, if not you can build your own and that is exactly what we are going to do.

When you have component logic that needs to be used by multiple components, we can extract that logic to a custom hook.

In the code below you can see a custom hook called useWindowWidth which was created using the hooks useState and useEffect to store the width of the window by using the window.innerWidth and we used the useEffect to watch for changes in the width of the window and when it does change useEffect will be triggered and the state updating function setWidth will be executed.

useEffect will know the window changed its width because of the event listener ‘resize’ added inside of it.

And after the window is resized it is wise to remove events from our code to avoid memory issues like memory leak. We call a cleanup function where we add a removeEventListener. Events take up memory space, and we don't want unnecessary memory being misused and wasted which can and might cause issues as your applications grows.

In the code below we can see our Hook in action.

The purpose of this hook was to extract some logic to manipulate the classes of TailwindCSS.

In the classes of the Button component below we are using a ternary operator with windowWidth to add different background colors to our button when the width of the button changes for example, we can use our hook to manipulate the responsiveness of the app, it is acting like a breakpoint.

Conclusion

React Hooks are amazing and they also give us room to create our own hooks which was the main purpose of this article, to show you that you can abstract your code by using hooks that can save us a lot of time and countless lines of code and please remember to start it with the name use and something.

So whenever you feel the need to reuse code that is being repeated that is when the Hooks come in handy.

References

React.js
W3 Schools

The importance of using Server-Side Rendering with Next.JS

Hugo Ramon Pereira — Mon, 17 Jan 2022 18:30:34 +0000

Introduction

Server-Side Rendering (SSR) is a resource provided by Next.JS meaning that for each request made by the user, a server-side HTML will be generated and that content will be pre-rendered. So when a request for a specific page is made, the process of building that page done by the browser will be faster. This set of steps of requesting content from the database, building the page by the browsers and delivering it to the client is Client-Side Rendering.

What are the advantages of using Server-Side Rendering with Next.JS?

The main advantages are: the faster response in page loading, the SEO (Search Engine Optimization) and the Web Crawlers that are the bots responsible for improving the indexing in the search engines of browsers such as Google, Bing, thus providing a better experience for the user who will have less waiting time and your page or site will probably appear at the top of searches.

Please have in mind that Next.JS also offers SSG (Static Site Generation) which is more recommended for smaller projects and that will not have that many components, which require so many specific requests to serve them, this can affect the performance of your application.

How does the SSR happen?

Using a function called getServerSideProps() by convention, Next.JS will understand that by using the above name in the function, server-side rendering should and will happen. The data of the function is passed via props that can be consumed in the function below in the same JS or JSX file.

The content generated by the code above:

Terminal in VSCode:

What is Search Engine Optimization (SEO)?

Taking into account that this is the main reason for using Server-Side Rendering with Next.JS, what is this Search Engine Optimization (SEO)? Well, that is a set of good practices that, if executed, make your page or WEB application better indexed in Google, Bing or other search engines, and that might lift your page or application to be in the first options to be shown for the user that makes the search for some content. The better structured, semantically organized with the correct tags, meta tags, titles, sections, alt attributes and ARIA (Accessible Rich Internet Applications) and that will provide a better experience when the subject is accessibility. The better your page is structured the better it will be evaluated by these browser search engines.

Lighthouse: How do I know if my page or site indexing is good?

Lighthouse is a tool developed by Google that analyzes web pages and applications providing metrics on performance, best practices, accessibility, SEO or if the application or page is a PWA (Progressive Web App) and even simulates a desktop and mobile application. It’s worth checking out the results. You can find Lighthouse in Chrome Dev Tools under one of the tabs, but not just in Google Chrome, in many browsers based on Google Chrome.

After clicking on ‘Generate Report’, a page analysis process will be started and a report will be generated.
We analyzed Vercel's website, which is the creator of the Next.JS framework, and these were the results:

References:

https://vercel.com/blog/nextjs-server-side-rendering-vs-static-generation
https://blog.cod3r.com.br/server-side-rendering-x-client-side-rendering
https://medium.com/swlh/server-side-rendering-with-next-js-56f84f98f9bd

Ramon Pereira
Frontend Developer

The importance of using Server-Side Rendering with Next.JS

Hugo Ramon Pereira — Mon, 17 Jan 2022 18:19:47 +0000

Introduction

What are the advantages of using Server-Side Rendering with Next.JS?

How does the SSR happen?

The content generated by the code above:

Terminal in VSCode:

What is Search Engine Optimization (SEO)?

Lighthouse: How do I know if my page or site indexing is good?

References:

Ramon Pereira
Frontend Developer