Chat Application Based on Squid

16 min readApr 7, 2024

By Alexander Belov, senior front-end developer at QuantumSoft

Few Words About Me

Hey! My name is Alex. And today I’ll tell you about Squid Cloud service. Together we’ll explore how Squid can help to easily build a real-time chat application using Next.js (and React).

First, let me start with a few words about myself. I’m a well-experienced front-end developer. I worked on many exciting projects, big and small ones. Most of them use Angular or React with REST, JSON RPC, or GraphQL. So these are the technologies, on which I specialize.

The Project

Now let’s talk about the project. Our task is to build a real-time chat application based on Next.js framework. The application should have a general room, available for everyone. Also, it should have an option to create private rooms with other users. For the backend we will use Squid.cloud. As an auth provider, we will use Auth0. (Squid also supports Cognito and JWT RSA).

Why Next.js? Just because it’s a very handy and simple framework with a set of features available out of the box. What I personally like about it is that it’s highly structured meaning it’s convenient to work with. The application routes are reflected on the file system; components and services, etc. are placed in corresponding directories — so, you always know where to find things and where to put things.

First Steps

Assume we have a Next.js project created using create-next-app. Also, we’ll need a set of components to build our UI (it can be a 3rd party library, like MUI).

The next step is to install Auth0 and Squid React SDKs. It’s pretty simple:

npm install --save @auth0/auth0-react
npm install --save @squidcloud/react

We will use Auth0Provider component and useAuth hook from auth0-react. Let’s wrap our application to Auth0Provider.

src/app/layout.tsx:

... 
<html lang="en">
  <body>
    <Auth0Provider
      domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN}
      clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: process.env.NEXT_PUBLIC_AUTH0_URL_REDIRECT_TO_AFTER_LOGIN,
        response_type: 'token id_token',
        scope: 'openid profile',
      }}
      cacheLocation="localstorage"
    >
      {children}    
    </AuthProvider>
  </body>
</html>
...

NEXT_PUBLIC_AUTH0_DOMAIN, NEXT_PUBLIC_AUTH0_CLIENT_ID values can be taken from Auth0 dashboard. All the environment variables are stored in .env.local.

To make our application interact with Squid, we will create SquidProvider component, which integrates Squid with Auth0.

src/app/components/SquidProvider.tsx:

import { EnvironmentId, SupportedSquidRegion } from '@squidcloud/common';
import { PropsWithChildren } from 'react';
import { SquidContextProvider } from '@squidcloud/react';
import { useAuth0 } from '@auth0/auth0-react';

export function SquidProvider({
  children,
}: PropsWithChildren): JSX.Element {
  const { user, getAccessTokenSilently } = useAuth0();  return (
    <SquidContextProvider
      options={{
        appId: process.env.NEXT_PUBLIC_SQUID_APP_ID || '',
        region: (process.env.NEXT_PUBLIC_SQUID_REGION || '') as SupportedSquidRegion,
        environmentId: (process.env.NEXT_PUBLIC_SQUID_ENVIRONMENT_ID || '') as EnvironmentId,
        authProvider: {
          integrationId: process.env.NEXT_PUBLIC_SQUID_AUTH_INTEGRATION_ID,
          getToken: async () => user && (await getAccessTokenSilently()),
        },
      }}
    >
      {children}
    </SquidContextProvider>
  );
}

NEXT_PUBLIC_SQUID_APP_ID, NEXT_PUBLIC_SQUID_REGION, NEXT_PUBLIC_SQUID_ENVIRONMENT_ID and NEXT_PUBLIC_SQUID_AUTH_INTEGRATION_ID values can be get from Squid dashboard.

Now let’s also wrap our application to SquidProvider.

src/app/layout.tsx:

... 
<html lang="en">
  <body>
    <Auth0Provider
      ...
    >
      <SquidProvider>
        {children}
      </SquidProvider>
    </AuthProvider>
  </body>
</html>
...

So, we can make the application alive! In other words, now we have an API for creating / login users and we have access to Squid backend functionality, which means we can execute functions and get collections data.

Types Reuse

It’s nice to have shared types between the backend and the frontend.

Here is a simple way to organize types reuse. First of all, put all the code into a monorepo. Let’s say the repo has the following structure:

squid-chat
├── backend
│   └── ...
└── frontend
    └── ...

Create package.json file in the repo root directory:

{
  "name": "squid-chat",
}

Run the following commands to create a workspace for the backend and the frontend:

npm init -w backend --yes
npm init -w frontend --yes

Flag -w points npm init to create a workspace. Flag — yes tells npm init to use default options without prompting a user.

Run the command to create a workspace for shared code:

npm init -w shared --yes

Open shared/package.json and change name value:

{
  "name": "@squid-chat/shared"
  ...
}

Run the command to be sure that all the modules are installed successfully and workspaces are available:

npm install

Now we can create shared/types directory and put there all data types definition files and use them in the frontend code the following way:

import { User } from '@squid-chat/shared/types/User';

The final package.json should look like this:

{
  "name": "squid-chat",
  "workspaces": [
    "shared",
    "frontend",
    "backend"
  ]
}

And here is the final repo structure:

squid-chat
├── backend
│   └── ...
├── frontend
│   └── ...
├── node_modules
│   └── ...
├── package-lock.json
├── package.json
└── shared
    ├── package.json
    └── types
        ├── Message.ts
        ├── Room.ts
        ├── User.ts
        ├── UserRoom.ts
        └── index.ts

Now the frontend part can get the latest types definitions by simple repository pulling. And if some data type is changed, TypeScript compiler will help us quickly find the change and support it.

Saving User Info: Document Update and Function Execution

In Squid, you can create or change a document directly. If you need to change several documents by one call or you need some complex logic behind the change, we can use executable functions. Let me demonstrate both ways. That’s how we can create a user document:

await executeFunction('createUser', {
  firstName,
  lastName
});

It’s pretty simple, isn’t it?

That’s how we can update a user presence. It helps understand whether a user is online or not. The code is also pretty simple:

await collection<User>('Users').doc(id).update({
  lastSeen: new Date()
});

The user document ID here is the Auth0 user ID (sub). Please, see the article about the application’s backend to understand how it works.

Note: In real-life projects, I wouldn’t recommend to pass current date from a client to a backend, just because the date can be wrong or compromised.

Let’s combine this code into a component that allows us to register a new user, get information about a current user, and update this information. Considering “registration” means we know the user’s name.

src/app/components/UserProvider.tsx:

import {
  PropsWithChildren,
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useSquid } from '@squidcloud/react';

const PRESENCE_REFRESHING_INTERVAL = 30 * 1000;type UserContext = {
  id: string | null;
  isRegistered: boolean;
  firstName: string | null;
  lastName: string | null;
  isOnline: boolean;
  timeZone: string | null;  register({
    firstName,
    lastName,
  }: {
    firstName: string;
    lastName: string;
  }): Promise<void>;  update({
    firstName,
    lastName,
    timeZone,
  }: {
    firstName?: string;
    lastName?: string;
    timeZone?: string;
  }): Promise<void>;
};const UserContext = createContext<UserContext | null>(null);export function UserProvider({
  children,
}: PropsWithChildren): JSX.Element {
  const { isAuthenticated, user } = useAuth0();
  const { collection, executeFunction } = useSquid();  const [id, setId] = useState<string | null>(null);
  const [firstName, setFirstName] = useState<string | null>(null);
  const [lastName, setLastName] = useState<string | null>(null);
  const [timeZone, setTimeZone] = useState<string | null>(null);  const isRegistered = useMemo(
    () => Boolean(firstName && lastName),
    [firstName, lastName]
  );  const isOnline = useMemo(
    () => Boolean(id) && isRegistered,
    [id, isRegistered]
  );  const register = useCallback(
    async ({
      firstName,
      lastName,
    }: {
      firstName: string;
      lastName: string;
    }): Promise<void> => {
      await executeFunction('createUser', {
        firstName,
        lastName,
      });      setFirstName(firstName);
      setLastName(lastName);
    },
    [executeFunction]
  );  const update = useCallback(
    async ({
      firstName: newFirstName,
      lastName: newLastName,
      timeZone: newTimeZone,
    }: {
      firstName?: string;
      lastName?: string;
      timeZone?: string;
    }) => {
      await executeFunction('updateUser', {
        firstName: newFirstName || firstName,
        lastName: newLastName || lastName,
        timeZone: newTimeZone || timeZone,
      });      setFirstName(newFirstName || firstName);
      setLastName(newLastName || lastName);
      setTimeZone(newTimeZone || timeZone);
    },
    [executeFunction, firstName, lastName, timeZone]
  );  const refreshPresence = useCallback(async () => {
    if (!id) {
      return;
    }    await collection('Users').doc(id).update({
      lastSeen: new Date(),
    });
  }, [collection, id]);  useEffect(() => {
    if (!id) {
      return;
    }    refreshPresence();    const presenceRefreshingInterval = setInterval(async () => {
      refreshPresence();
    }, PRESENCE_REFRESHING_INTERVAL);    return () => {
      clearInterval(presenceRefreshingInterval);
    };
  }, [id, refreshPresence]);  const userContextValue = useMemo(
    () => ({
      id,
      isRegistered,
      firstName,
      lastName,
      isOnline,
      timeZone,
      register,
      update,
    }),
    [
      id,
      isRegistered,
      firstName,
      lastName,
      isOnline,
      timeZone,
      register,
      update,
    ]
  );  return (
    <UserContext.Provider value={userContextValue}>
      {children}
    </UserContext.Provider>
  );
}

Now we have a component providing a context, which can be used within useContext hook, so we can work with thecurrent user inside the app. Of course, we need to wrap the app to this component:

src/app/layout.tsx:

... 
<html lang="en">
  <body>
    <Auth0Provider
      ...
    >
      <SquidProvider>
        <UserProvider>
          {children}
        </UserProvider>
      </SquidProvider>
    </AuthProvider>
  </body>
</html>
...

Getting User Info: Simple Collection Document Subscription

Okay, we have stored some data in the database. Now we want to get the data. Here is an example how to get the latest snapshot of a user document:

const userDocument = await collection('Users').doc(userId).snapshot();

But what if we want to get the latest snapshot on each document update? For that, Squid gives a fantastic mechanism based on RxJS’s subscriptions — we can just subscribe on snapshots changes of some document. Let’s use this mechanism in our UserProvider to have the current user up to date.

src/app/components/UserProvider.tsx:

...

import { Subscription } from 'rxjs';...export function UserProvider({
  children,
}: PropsWithChildren): JSX.Element {
  const { isAuthenticated, user } = useAuth0();
  const { collection, executeFunction } = useSquid();  const [id, setId] = useState<string | null>(null);
  const [firstName, setFirstName] = useState<string | null>(null);
  const [lastName, setLastName] = useState<string | null>(null);
  const [timeZone, setTimeZone] = useState<string | null>(null);  ...  useEffect(() => {
    let userDocumentSubscription: Subscription | undefined;    setId(null);
    setFirstName(null);
    setLastName(null);    const userId = user?.sub;    if (isAuthenticated && userId) {
      userDocumentSubscription = collection('Users')
        .doc(userId) 
        .snapshots()
        .subscribe((userDocument) => {
          setId(userId);
          setFirstName(userDocument?.data.firstName || null);
          setLastName(userDocument?.data.lastName || null);
          setTimeZone(
            userDocument?.data.timeZone ||
              Intl.DateTimeFormat().resolvedOptions().timeZone
          );
        });
    }    return () => {
      userDocumentSubscription?.unsubscribe();
    };
  }, [isAuthenticated, user?.sub, collection]);  ...
}

Note: to avoid memory leaking, don’t forget to call unsubscribe() method of a document subscription in a useEffect cleanup function.

Getting users, rooms, and messages: queries and joins

We have an authentication integrated, we can get and update the data of the current user. The last step is to create a component providing an API for chats. Let’s describe the API: