DEV Community: Chaudhry Talha 🇵🇸

TLDR; Deploy Vite + ReactJS App to Cloudflare Pages

Chaudhry Talha 🇵🇸 — Sun, 05 Apr 2026 16:56:01 +0000

Assuming you already have created a vite + react-js project.

Open cloudflare dashboard and login to you account. Cloudflare, go to Compute > Workers & Pages and then click Create application you'll see something similar to this:

Select Looking to deploy pages? Get started

Click on the Get started next to Import an existing Git repository option:

Select your github repository where your vite + reactjs project is, and click on Begin Setup:

Select the branch on which anytime you commit and push the code to cloudflare will automatically run your build and deploy command (basically taking care of the CI/CD for your react project). As the project is vite + reactjs project so the run command and output directory by default will be as it is shown in the image below.

You can add .env variables at this stage as well if you have any. The arrow is point to that in the image, but it is optional and you can always add/edit them later.

Click on Save & Deploy to continue.

Once deployed you can check out the URL it has given. Now anytime you push code to the branch you select it'll deploy the app automatically.

TLDR; ReactJS project initialization with Tailwind CSS and Shadcn using Vite

Chaudhry Talha 🇵🇸 — Sat, 14 Mar 2026 18:24:17 +0000

TLDR; guide of initializing a ReactJS project using Vite and installing TailwindCSS and Shadcn. You can choose to use pure CSS as well.

Run this command to create a new project:

npm create vite@latest my-app -- --template react-ts

In the above the dependencies are automatically installed. To manually install dependencies and running the app:

cd my-app
yarn install
yarn dev

If you open localhost:5137 the URL given in your terminal you'll see something similar to this:

Tailwind Setup

Install the required package:

yarn add -D tailwindcss @tailwindcss/vite

shadcn absolutely requires path aliases (@/components/...) to work, so we'll need to install this package as well:

yarn add -D @types/node

Open vite.config.ts file and in it add tailwindcss() in plugins and the whole resolve: {… object as shown below:

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

If you're seeing errors in import statements see the pnp fix in at the end of this post

Now open tsconfig.json and ensure it matches the below code i.e. added "compilerOptions": {… :

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Open src/index.css and remove everything in it and add this on top of that file:

@import "tailwindcss";

shadcn/ui Setup

From you app root directory in terminal, run:

npx shadcn@latest init

Use Radix if prompted to select a component library. Which preset would you like to use I selected Vega and you can select any.

Let's install the button UI from shadcn to test if we got it installed successfully:

npx shadcn@latest add button

Test everything

To test if everything is working okay let's replace the <button with the button from shadcn in App.tsx:

import { Button } from "./components/ui/button";

//... Other code        

<Button
          variant={"destructive"}
          className="bg-black"
          onClick={() => setCount((count) => count + 1)}
        >
          count is {count}
        </Button>

The red color is coming from Shadcn variant and the background black is added via tailwind.

pnp error from yarn

When using yarn to install packages etc, the latest version install and manages packages using Yarn Plug'n'Play (there will be a pnp file created in your codebase instead of node_modules folder) if you use yarn. To use the traditional node_modules you can do:

yarn set version stable
yarn config set nodeLinker node-modules
rm -rf .pnp.cjs .pnp.loader.mjs node_modules
yarn install

After this restart your IDE if it is still not resolving the imports.

TLDR; Google Auth in ReactJS using Supabase

Chaudhry Talha 🇵🇸 — Fri, 10 Oct 2025 15:02:16 +0000

My project was created using vite + react-js.

Let's get the required keys from Google Cloud Console. I have these two URLs form which I'll be sending the google sign-in request from Local host i.e. http://localhost:5173 and a Production URL https://MY_DOMAIN_NAME.com.

Go to Google Cloud Console create/select a new proejct → in search bar search OAuth consent screen and select it:

In Branding you'll need to add you https://MY_DOMAIN_NAME.com in the Authorized domains section:

You can keep the app in test mode or Publish App. I'll keep it in test mode and click on + Add users towards the end under Test users. These users will be allowed to login into the app only.

If you decides to publish you'll need to have links for privacy policy and terms of service to your website.

Click Clients on the left sidebar. Click Create OAuth client.

Fill out name of your project

Authorized redirect URIs: Paste your exact Supabase callback URL. It looks exactly like this:

https://<YOUR_PROJECT_ID>.supabase.co/auth/v1/callback

You can find the ...supabase.co/auth/v1/... from Supabase Dashboard -> Authentication -> Sign In / Providers > Google

Click Create. Copy the Client ID and Client Secret it gives you.

Next, back in your Supabase Dashboard -> Authentication -> Sign In / Providers > Google, toggle it on.

Paste the Client ID and Client Secret you just created in GCP, and click Save.

Next, Go to Authentication -> URL Configuration.

Site URL: Enter https://MY_DOMAIN_NAME.com

Redirect URLs: Click "Add URL" and add these two exact lines so auth works locally and in production:

http://localhost:5173/**
https://MY_DOMAIN_NAME.com/**

I have the URL whitelisted in my Supabase project as well:

Below is how I'll implement it in my ReactJS project. I'll be using context API to keep the logged in state (feel free to use zustand or any you prefer).

Install this first:

yarn add @supabase/supabase-js

You should have your:

VITE_SUPABASE_URL=https://<YOUR_PROJECT_ID>.supabase.co
VITE_SUPABASE_ANON_KEY=your_long_anon_key_here

in your .env file. If you haven't check the Extras section at the end.

Add a file named supabaseClient.ts and in it add:

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

const supabaseUrl = import.meta.env.YOUR_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.YOUR_SUPABASE_ANON_KEY;

if (!supabaseUrl || !supabaseAnonKey) {
  throw new Error("Missing Supabase environment variables. Please set YOUR_PUBLIC_SUPABASE_URL and YOUR_SUPABASE_ANON_KEY.");
}

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

As I'm using Context API, we'll need to create three files to add a context for Auth:

AuthContext.tsx
AuthProvider.tsx
useAuth.ts

In AuthContext.tsx add this code:

import type { Session, User } from "@supabase/supabase-js";
import { createContext } from "react";

export type UserProfile = {
  id: string;
  email: string | null;
  full_name: string | null;
  photo_url: string | null;
};

type AuthContextType = {
  user: User | null;
  profile: UserProfile | null;
  session: Session | null;
  loading: boolean;
  signInWithGoogle: () => Promise<void>;
  signOut: () => Promise<void>;
};

export const AuthContext = createContext<AuthContextType | null>(null);

The create a file AuthProvider.tsx add:

import type { Session, User } from "@supabase/supabase-js";
import { useEffect, useState } from "react";
import { supabase } from "../../lib/supabase";
import { AuthContext, type UserProfile } from "./AuthContext";

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [session, setSession] = useState<Session | null>(null);
  const [user, setUser] = useState<User | null>(null);
  const [profile, setProfile] = useState<UserProfile | null>(null);
  const [loading, setLoading] = useState(true);

// If you want to store user data in a supabase table as well, for example I have user_data table table example here in upsertProfile
  const upsertProfile = async (u: User) => {
    const data = {
      id: u.id,
      email: u.email ?? null,
      full_name: u.user_metadata?.full_name ?? null,
      photo_url: u.user_metadata?.avatar_url ?? null,
    };

    const { data: saved } = await supabase
      .from("user_data")
      .upsert(data, { onConflict: "id" })
      .select()
      .single();

    setProfile(saved ?? data);
  };

  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setSession(session);
      setUser(session?.user ?? null);
      if (session?.user) upsertProfile(session.user);
      setLoading(false);
    });

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange((_event, session) => {
      setSession(session);
      setUser(session?.user ?? null);
      if (session?.user) upsertProfile(session.user);
      else setProfile(null);
    });

    return () => subscription.unsubscribe();
  }, []);

  const signInWithGoogle = async () => {
    await supabase.auth.signInWithOAuth({
      provider: "google",
      options: { redirectTo: window.location.origin },
    });
  };

  const signOut = async () => {
    await supabase.auth.signOut();
  };

  return (
    <AuthContext.Provider
      value={{ user, profile, session, loading, signInWithGoogle, signOut }}
    >
      {children}
    </AuthContext.Provider>
  );
}

and finally the hook, create a file useAuth.ts and in it add:

import { useContext } from "react";
import { AuthContext } from "./AuthContext.tsx";

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error("useAuth must be used within AuthProvider");
  return ctx;
}

Now you are finally ready to add the changes to app. I have seen people putting the auth context directly in App.tsx, or there are other mechanisms as well, so it depends on your app specific needs.

In this article, I'll take a simple approach, we'll wrap the whole <App /> in the AuthProvider so open main.tsx that has your app's ...<StrictMode><App />... and wrap the <App /> with the AuthProvider:

//... Your imports

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <AuthProvider>
      <App />
    </AuthProvider>
  </StrictMode>,
);

Your routing will be in the App.tsx file. As an example say you have two pages Home.tsx and Profile.tsx.

Home.tsx can be accessed by both authenticated and not authenticated users. Some parts of the pages will be available for public.
Profile.tsx Only accessible by the Authenticated users

For Home.tsx

import { useAuth } from "./AuthProvider";
//... other imports

export default function Home() {

const {
    user,
    profile,
    isLoading: isAuthLoading,
    signInWithGoogle,
    signOut,
  } = useAuth();

//... other code

return (
<div className="flex items-center justify-between gap-4">

      <h1>Home</h1>
      <p>This page is public.</p>

{user && profile ? (
              <div>
                <p>Welcome, {profile.name}!</p>
                <p>{profile.email}</p>
                <p>{profile.avatarUrl}</p>
                <button onClick={signOut}>Sign Out</button>
              </div>
            ) : (
               <button onClick={() => {
                  void signInWithGoogle();
                }}>Login with Google</button>
            )}

</div>
)
}

For Profile.tsx:

import { useNavigate } from "react-router-dom";
//... Other imports

export default function Profile() {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) navigate("/", { replace: true });
  }, [user, loading, navigate]);

  if (loading || !user) return null;

  return <div>Profile</div>;
}

NOTE: Using the above approach in Profile.tsx, is a common and safe pattern. The only edge case to know about: There's a brief moment where an unauthenticated user could see the page render before the redirect fires — your if (loading || !user) return null handles that by rendering nothing until auth state is resolved, so nothing sensitive is ever shown.

The loading guard is the key safety net here. As long as you return null while loading and redirect when !user, there's no flash of protected content.

Extras

Getting Supabase Anon Key and other required variables for `.env`

In Supabse project goto Project Settings and then API Keys

The default key under Publishable key That is your new "anon" key, Copy that top one and paste it into your .env as VITE_SUPABASE_ANON_KEY.

(You don't need the "Secret key" anywhere so leave it as is).

To get VITE_SUPABASE_URL click on Data API under INTEGRATIONS menu:

This is what you'll paste for your VITE_SUPABASE_URL.

TLDR: Host your website on GitHub Pages with custom domain

Chaudhry Talha 🇵🇸 — Wed, 04 Jun 2025 19:52:36 +0000

Host your static HTML web pages for free on GitHub Pages. This TLDR guide will show a step-by-step process.

Step 1: Have a public repo with an index.html page in it.
Step 2: Go to Settings tab in the repo, and click on Pages.

Step 3: Under "Build and deployment", under "Source", select Deploy from a branch. Under "Build and deployment", under "Branch", use the branch dropdown menu and select a publishing source.

When the site is live, you can see the URL appearing as marked above.

Step 4: To have your domain instead of the one provided by github, here are all the things you need to do:

4.1 In your repo, wherever index.html is, add a file named CNAME (no file extension) in that file, add your domain name without http, https or www. for example, below is how Google will add their domain:

4.2 Go to your domain registrar and edit the DNS to add all these 4 A records:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

4.3 Add a new CNAME record in your domain DNS. You'll need to add .github.io and www as name. (Delete any current CNAME record “www” as there must be only one)

So in step 4, you added 4 A records and 1 CNAME record in your DNS and 1 CNAME file in your repo.

Step 5: Go to your GitHub repo Settings --> Pages and add your domain under Custom domain (i.e. google.com) and click Save

It'll take a few seconds to check the DNS. After the DNS check is successful, you can refresh the page, and this will allow you to enforce HTTPS if you'd required.

This is how you can host your static HTML website on github pages easily.

I just published React Native + Unity 3D Tutorial on Medium https://ibjects.medium.com/react-native-unity-3d-tutorial-6ef230df81a8?source=friends_link&sk=bc90b0e99d2def38de92c713966cd1de

Chaudhry Talha 🇵🇸 — Sat, 30 Nov 2024 15:32:10 +0000

React-Native and Three.js

Chaudhry Talha 🇵🇸 — Tue, 01 Oct 2024 17:06:38 +0000

A more recent code related to this article is available: https://github.com/thechaudharysab/ThreeJSRNTestProj I haven't updated the code in the article according to that.

Create a new react-native CLI project:

npx react-native init Learn3DApp

It's preferred that you have real devices to see the output. The 3D model will be able to run on an Android emulator, but there are issues with the iOS simulator. The screenshots you'll see in this iOS project are all on a physical device.

Let's install all the required packages:

yarn add three @react-three/fiber

Then run the command below:

npx install-expo-modules@latest

It'll ask you a maximum of two questions. Below is how I have answered each:

install-expo-modules @0.10.2 Ok to proceed? (y) y
Install the Expo CLI integration? … no

We'll manually install the Expo CLI in a later step.

Below is the screenshot of my install-expo-modules installation:

You'll need expo-cli installed globally to install the package below. If you don't have expo-cli use npm install -g expo-cli to install it globally on your system first and then run the command below in your project folder.

expo install expo-gl

The above are the basic packages needed to load a 3D model. But we'll install one more supporting package named Drei, that'll help you with three.js all provided by the same https://docs.pmnd.rs/.

Drei provides us with helpers that make it easy to work with 3D. Without Drei, you’ll need to manually set up and configure many common 3D features (e.g., controls, loaders, environment maps), which can be time-consuming and error-prone.

To install the Drei package do:

yarn add @react-three/drei

After all the installations below is how the dependencies look like in my project now: (expo was installed automatically by install-expo-modules)

Next, go to metro.config.js and add this code to it:

  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs', 'mjs'],
    assetExts: ['glb', 'gltf', 'png', 'jpg'],
  },

For Android just do cd android && ./gradlew clean and for iOS do cd ios && pod install at this point.

We'll now run and test if the expo is linked successfully and only then we'll start working with 3D stuff. As expo-gl is a very important package to be used when trying to run 3D on mobile devices in a react-native environment.

Open App.tsx and remove everything and just have:

import React from 'react';
import Constants from 'expo-constants';

console.log(Constants.systemFonts);

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

Run the project yarn start --reset-cache. The console.log(Constants.systemFonts); should print this for you in the terminal, ensuring a successful install:

make sure you see a blank screen without any errors for both iOS and Android.

Now that the boring stuff is out of the way, let's start 3D work. You'll need a 3D model that you'll be loading in the app.

There are many websites where you can find 3D models for free. Just like how images have JPG, PNG, and many different formats, the 3D file format you want to download can be either .gltf or .glb.

I know https://www.cgtrader.com/ which is a nice website to find 3D models in .gltf or .glb formats, you can apply filters to download free models.

I'm going to use https://poly.pizza/bundle/Farm-Animal-Pack-1kUvRTPLzT click on Download GLTF and it'll give you .glb files of different animals.

In the project create src folder, and inside create a models folder. Copy the Horse.glb or any animal file in the models folder.

Next, we need to have a JSX of the GLB file as well. To do that go to https://gltf.pmnd.rs/ and drop the GLB file and it'll show you a preview with JSX code as shown below:

Copy the code and create a new file named Horse.tsx in the Models folder and paste it there.

To solve the errors we'll do the following:

Change from '@react-three/drei' to from '@react-three/drei/native'
Remove props and {...props}
Remove the last line in code useGLTF.preload('/Horse.glb');
Give file path with require in const { nodes, materials, animations } = useGLTF(...
Made the Model function export default and it's name to Horse from Model

The screenshot below is how my full Horse.tsx is looking now:

Don't worry about the nodes, materials, animations red underline as these are just typescript things asking for specific types.

Next, open App.tsx and add the following code in it:

import React, { Suspense } from 'react';
import { Canvas } from '@react-three/fiber/native';
import { OrbitControls } from '@react-three/drei/native';

import { View } from 'react-native';
import Horse from './src/models/Horse';

const App = () => {
  const renderHorseCanvas = () => {
    return (
      <Canvas shadows>
        <directionalLight position={[5, 10, 15]} intensity={1} castShadow />
        <directionalLight position={[-10, 10, 15]} intensity={1} />
        <directionalLight position={[10, 10, 15]} intensity={1} />
        <Suspense fallback={null}>
          <Horse />
          <mesh
            receiveShadow
            rotation={[-Math.PI / 2, 0, 0]}
            position={[0, -1, 0]}>
            <planeGeometry args={[10, 10]} />
            <shadowMaterial opacity={0.5} />
          </mesh>
        </Suspense>
        <OrbitControls enableZoom={false} />
      </Canvas>
    );
  };

  return <View style={{ flex: 1 }}>{renderHorseCanvas()}</View>;
};

export default App;

Re-run the project and you'll see the horse model being rendered.

It seems like there is a divide between the shadow and the actual horse body. But it's nothing that a minor position repositioning cannot fix. Let's change the renderHorseCanvas code to the one below:

  const renderHorseCanvas = () => {
    return (
      <Canvas shadows>
       //... remaining code
          <Horse position={[0, -1, 0]} />
          //... remaining code
      </Canvas>
    );
  };

This is how you render a 3D using three js in your react-native app.

Bonus: Animations

The horse we've added is still and doesn't do anything. This glb file includes animations like Idle, Jump, Run, Walk, etc.

In Horse.tsx we had a line of code const { actions } = useAnimations(animations, group); which we'll use.

In Horse.tsx before the main return ( add this code:

//... remaining code
  const { actions, names } = useAnimations(animations, group);
  console.log('animations names: ', names);
  // animations names:  ["Armature|Death", "Armature|Idle", "Armature|Jump", "Armature|Run", "Armature|Walk", "Armature|WalkSlow"]
  useEffect(() => {
    // Play the "Idle" animation
    const idleAction = actions['Armature|WalkSlow'];
    if (idleAction) {
      idleAction
        .reset()
        .setLoop(LoopRepeat, Infinity) // Set loop mode and infinite repetitions
        .fadeIn(0.5)
        .play();
    }
    return () => {
      // Stop the "Idle" animation when the component is unmounted
      if (idleAction) idleAction.fadeOut(0.5);
    };
  }, [actions]);
//... remaining code

Here is the full code:

You can see all the available animations of any GLB or GLTF file with the console.log('animations names: ', names);. I have the player Armature|WalkSlow animation on LoopRepeat to give it a cool walking horse feel which you can see below, you can also add a different name from the animations names and see how they look.

Opening on an Android device I see this cool animation:

Extras:

Here are some things and additional resources that might be of help:

I was constantly getting this print in the terminal as soon as the 3D model renders:

LOG EXGL: gl.pixelStorei() doesn't support this parameter yet!

This is okay as it'll not impact anything for production like it'll not crash that's for sure. If your app is crashing there must be some other issue. I found a solution https://github.com/expo/expo/issues/11063 I would not say it's ideal but it works.

The solution states that in App.tsx or the file where you have the Canvas from @react-three/fiber add a prop to it as:

      <Canvas
        shadows={true}
        onCreated={state => {
          const _gl = state.gl.getContext();
          const pixelStorei = _gl.pixelStorei.bind(_gl);
          _gl.pixelStorei = function (...args) {
            const [parameter] = args;
            switch (parameter) {
              case _gl.UNPACK_FLIP_Y_WEBGL:
                return pixelStorei(...args);
            }
          };
        }}>
//... rest of the code

This magic potion will make the log go away.

I did a POC for these two as well if you're interested in exploring alternatives to the React-Native + ThreeJS:

Here is a resource to find 3D models for free: https://www.cgtrader.com/free-3d-models

Have a project and want me to look at, you can hire me on upwork: https://www.upwork.com/freelancers/~01e4982cf39ced7048

If you'd like to support you can do so via https://buymeacoffee.com/chaudhrytalha

I also write on medium so you can follow me there too: https://ibjects.medium.com/

TLDR; Add adaptive app icon of your android app

Chaudhry Talha 🇵🇸 — Sat, 10 Aug 2024 16:51:42 +0000

Weather you're building using native android (kotlin or java), or react-native and even flutter use this technique to add adaptive app icon for your android app. Adaptive icons will adapt to the device look and feel i.e. if it's a circle, or rounded square on others adaptive icons will adapt.

Open your android project in Android Studio. Go to /app/res/drawable folder and right click New -> Image Asset

You'll see an Asset Studio window will open:

Here is the quick info about the options you have in this window:

Icon type depending on the type of app you're building it'll be generating the assets. Like if you're building an android app for the TV then it'll have it's own icon sizes. As I'm creating for mobile app so I'll keep the options selected Launched Icons (Adaptive and Legacy)
As the name is already written ic_launcher which is the name of the icon Android Studio has already set by default. Keep it as it is
Next, you have three tabs, Foreground Layer, Background Layer and Options.
As the names suggest we're going to have a background layer which can be a colour or an image and same goes for foreground layer.
We'll keep the Options as it is, but you can explore it to see what options suits for your use-case.

Below is the icon that I'll be adding:

I've select the above PNG as foreground layer and adjusted the Resize option to make sure the layer is within the circles in the Preview

For the background layer I'll be adding white color.

After that press Next and it'll show you which files will be created, overwritten or removed. As I kept the name same i.e. ic_launcher so this is going to replace the current default Android app icon, so I'll just press Finish

It's completely safe to add all the files it has created to Git.

For my app icon, there were 33 changes in the git.

Clean and run the project and you'll see a pixel perfect logo, adaptive to all android phones.

5 Helpful Developer Productivity Tools

Chaudhry Talha 🇵🇸 — Tue, 16 Jul 2024 02:20:22 +0000

Easy README editor tool

I like to create good README files for the projects I work on, and it can get hectic if you're writing markdown and then previewing it and then fixing any mistakes.

readme.so

Build, test, and debug regex

Regex can be a PITA sometimes. Here is a tool I use to build a regex or test regex in code reviews.

regex101

Create secure tunnels for your local development

Imagine you’re working on a website on your computer and you want to show it to someone else who’s not nearby. Normally, they can’t see it because it’s only on your local machine. Ngrok creates a secure tunnel from your computer to the internet, giving you a temporary web address that anyone can use to access your site.

ngrok

Check the cost of adding npm packages

As I am a javascript developer, so adding a new npm packages in my project comes every now and then. This tools tell you what would be the cost of adding a package in your project is.

bundlephobia

Create mock APIs with temporary data

Sometimes you need to create demo data while the backend is still working on the API OR you want to have a mock API in place that return that temporary data as a placeholder. This tool will help you do all of that.

mockaroo OR mocky

Google SignIn in react-native using firebase auth

Chaudhry Talha 🇵🇸 — Thu, 13 Jun 2024 19:14:42 +0000

If you're looking for a solution without firebase, I've a medium article for that: https://medium.com/@ibjects/google-signin-tutorial-for-react-native-81a57fb67b18

Straight-forward way of implementing a google sign-in in a react native app using firebase.

Firebase Console

Add Google from the Additional Providers.

Note down your Web client ID.

Once it's done it should look like:

React-Native

Let's install the required libraries:

yarn add @react-native-firebase/app @react-native-firebase/auth
yarn add @react-native-google-signin/google-signin

For Android, clean the project and build once from android studio to avoid any unexpected errors.

Create a Login.tsx screen. There are a few things that work together here:

Checking onAuthStatusChanged using auth from @react-native-firebase/auth to check the current status of the user authentication.
Configure GoogleSignin using GoogleSignin.configure where we'll provide webClientId which you should have at the time of the firebase console side configuration.
Handle onGoogleButtonPress and renderGoogleSigninButton as we'll be creating our own button to trigger a GoogleSignin request.
Once a user is logged in then rendering a renderLogoutView and return main components.

Below is the code for Login.tsx broken down as per the number list above:

// 1. 

import auth, { FirebaseAuthTypes } from '@react-native-firebase/auth';

// other imports and code

    const [user, setUser] = React.useState<FirebaseAuthTypes.User | null>();

    function onAuthStatusChanged(user: FirebaseAuthTypes.User | null) {
        setUser(user);
    }

    useEffect(() => {
        const subscriber = auth().onAuthStateChanged(onAuthStatusChanged);
        return subscriber; // unsubscribe on unmount
    }, []);

// 2. 

import { GoogleSignin } from "@react-native-google-signin/google-signin";

//... other imports and everything in 1.

    GoogleSignin.configure({
        webClientId: 'ADD_YOUR_KEY_HERE',
        offlineAccess: true,
    });

If required, look for Web client ID reference above to know where to get it.

// 3a. onGoogleButtonPress

async function onGoogleButtonPress(user: FirebaseAuthTypes.User | null) {
  if (user) {
    // user is already logged in so no need to do anything
    return null;
  }

  try {
    // Check if your device supports Google Play
    await GoogleSignin.hasPlayServices({
      showPlayServicesUpdateDialog: true,
    });

    const { type, data } = await GoogleSignin.signIn();

    /**
     * @type can be "cancelled" in which can @data will be 'null'; 
     * If @type is "success" then @data will be:
     * user: {
            id: string;
            name: string | null;
            email: string;
            photo: string | null;
            familyName: string | null;
            givenName: string | null;
        };
        scopes: string[];
        idToken: string | null;
        serverAuthCode: string | null;
     */

    if (type === 'success') {
      // const { id, name, email, photo, familyName, givenName } = data.user;

      // Create a Google credential with the token
      const googleCredential = auth.GoogleAuthProvider.credential(data.idToken);

      // Sign-in the user with the credential
      return auth().signInWithCredential(googleCredential);
    } else if (type === 'cancelled') {
      // When the user cancels the flow for any operation that requires user interaction.
      return; // do nothing
    }
  } catch (error) {
    console.error('ERROR: ', error);
    return error;
  }
}

With a simple GoogleSignin.signIn() it'll automatically handles everything.

Now we'll implement the google sign in button component:


// 3b. renderGoogleSigninButton

import {
    GoogleSignin, // already imported before
    isErrorWithCode,
    statusCodes,
} from "@react-native-google-signin/google-signin";

//... other code

const renderGoogleSigninButton = () => {

        const buttonTitle = user ? `Signed in as: ${user.displayName}` : 'Continue with Google'

        return (
            <Pressable style={styles.buttonContainer} onPress={() => onGoogleButtonPress().then((value: FirebaseAuthTypes.UserCredential | null) => {
                    // The onGoogleButtonPress will update the setUser state, so no action needed here
                if (value) {
                    console.log('value.additionalInnfo: ', value.additionalUserInfo);
                    console.log('value.user: ', value.user);
                }
            }).catch((error) => {
                if (isErrorWithCode(error)) {
                    switch (error.code) {
                        case statusCodes.SIGN_IN_CANCELLED:
                            // user cancelled the login flow
                            Alert.alert("User cancelled the login flow. Please try again.");
                            break;
                        case statusCodes.IN_PROGRESS:
                            // operation (eg. sign in) already in progress
                            Alert.alert("Sign In already in progress. Please wait.");
                            break;
                        case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
                            // play services not available or outdated
                            Alert.alert("Play services not available or outdated. Please update your play services.");
                            break;
                        default:
                            // some other error happened
                            Alert.alert("An unknown error occurred. Please try again later.");
                    }
                } else {
                    // an error that's not related to google sign in occurred
                    Alert.alert("An error that's not related to google sign in occurred. Please try again later.");
                }
            })}>
                <Text>{buttonTitle}</Text>
            </Pressable>
        )
    }

The step 4, let's divide it into smaller parts:

Implement signOut using auth
implement a renderLogoutView to implement logout.
Main screen Components that include login and logout buttons

// 4a.Implement `signOut` using `auth`
// src/api/FirebaseAuthUtils.ts
import auth from '@react-native-firebase/auth';

export function userLogout(): Promise<string> {
    return new Promise((resolve, reject) => {
        auth()
            .signOut()
            .then(() => {
                resolve('Logout Successful');
            })
            .catch(error => {
                reject({
                    title: 'Error',
                    desc: error.message,
                });
            });
    });
}

Created a new file in src/api/FirebaseAuthUtils.ts and added a logout function.

Everything below is in Login.tsx

// 4b. Implement a `renderLogoutView` to implement logout.

import { userLogout } from "../api/FirebaseAuthUtils";
//... other imports

    const renderLogoutView = () => {
        if (user) {
            return (
                <Pressable onPress={() => {
                    userLogout().then((message) => {
                        Alert.alert(message);
                    }).catch(error => {
                        Alert.alert(error.title, error.desc);
                    });
                }}>
                    <Text style={styles.buttonTitle}>Logout</Text>
                </Pressable>
            )
        }
    }

// 4c. Main screen `Components` that include login and logout buttons

return (
        <ScrollView>
                {!user && <>
                    <Text style={styles.descriptionText}>
                        New or returning user, press{'\n'}
                        <Text style={styles.boldText}>Continue with Google
                        </Text> to continue
                    </Text>
                    {renderGoogleSigninButton()}
                </>}
                {renderLogoutView()}
        </ScrollView>
)

That's all the code that is needed. Next let's test it.

Testing

I tested on simulator and device, it works.

I am not logged in, so it shows the Login button:

I am logged in, so it shows the Logout button:

It'll take user to Google Sign In page for verification.

Logout test and it works as expected.

Errors

If you're getting this error:

 LOG  ERROR:  [Error: DEVELOPER_ERROR]
 LOG  ERROR:  10 DEVELOPER_ERROR

Add the SHA-1 and SHA-256. If you only have debug build then just add for that otherwise add total 4; 2 for debug and 2 for release:

Below is the command you can run to get all the available SHA fingerprints:

cd android && ./gradlew signingReport

Scroll down to find > Task :app:signingReport. Here you can find all the available SHA fingerprints. I only have debug so for me release and debug keys are the same, so in the above screenshot you see only two SHA fingerprints.

This solves the 10 DEVELOPER_ERROR.

If you're getting:

[Error: SIGN_IN_REQUIRED]

Make sure that your signOut is properly configured. Try deleting the app and installing again.

TLDR; Suspense in react-query

Chaudhry Talha 🇵🇸 — Sat, 01 Jun 2024 19:48:41 +0000

In React Query, Suspense is a way to handle loading states for asynchronous data fetching. It essentially lets your components "pause" until the data they need is available. For example if your data is bing fetched react loads a temporary component instead until the data becomes available.

Note: Suspense requires React 18 or later.

Without Suspense:

You typically use a state variable (e.g., isLoading) to indicate if data is being fetched.
You conditionally render loading indicators while the data is being fetched.
This can lead to a lot of conditional logic and potentially messy code.

With Suspense:

Wrap your component in a Suspense boundary: This signals to React that your component might need to wait for data.
Use useQuery: This hook fetches data asynchronously and provides information about the data fetching state (loading, error, data).
React Query throws a promise: When data is being fetched, useQuery internally throws a promise. This "suspends" rendering.
Suspense boundary catches the promise: The Suspense boundary catches the promise thrown by useQuery and renders a fallback component (e.g., a loading indicator) while the data is being fetched.
Data arrives and rendering resumes: Once the promise resolves with the data, React continues rendering your component with the actual data.

Benefits of Suspense:

Cleaner code: You avoid repetitive conditional logic for loading states.
Improved user experience: Users see a clear loading indicator while data is being fetched.

React Query and Suspense work together seamlessly:

React Query manages data fetching and provides the "suspending" behavior.
You can use Suspense boundaries to handle loading states in a cleaner way.

Code example:
https://tanstack.com/query/v5/docs/framework/react/examples/suspense

TLDR; gcTime & staleTime in react-query

Chaudhry Talha 🇵🇸 — Wed, 22 May 2024 17:41:23 +0000

Here is a simple understanding of two very important concepts in react-query caching.

Prerequisites: Will be good if you have a very basic idea of what react-query is..

In React Query v5, the cacheTime option in React Query has been renamed to gcTime.

The gcTime and staleTime options in React Query serve different purposes in managing and controlling the cached data lifecycle.

TLDR; In summary, gcTime manages how long data can remain in the cache after it becomes unused before being garbage collected to free up memory, while staleTime determines how long data can be considered fresh before triggering a refetch to ensure data currency and accuracy. Both options play crucial roles in optimizing data caching, memory management, and data freshness in React Query applications.

gcTime:

gcTime (Garbage Collect Time) is used to determine how long data will remain in the cache after a query becomes unused.

By setting gcTime to a specific duration (in milliseconds), you control how long data stays in the cache after it is no longer actively used. Once the gcTime duration has passed, the data is considered eligible for garbage collection, effectively managing the cache size and memory consumption.

Once the specified gcTime duration elapses, the data is marked for garbage collection to prevent the cache from growing indefinitely. gcTime focuses on managing memory and ensuring that outdated or unused data is eventually removed from the cache to maintain optimal performance and memory usage.

staleTime:

staleTime is used to specify the duration for which data is considered fresh before it becomes stale and triggers a refetch. When a query result is accessed, React Query checks if the data is stale based on the staleTime value.

If the data is stale (i.e., the specified time has passed since the data was fetched), React Query initiates a background refetch to update the data (isFetching can be used to detect when the background refresh). staleTime is primarily used to control how often React Query should automatically refetch data to ensure it remains up to date. By default, if no staleTime is provided (or set to 0), the query will immediately refetch when it mounts.

If you provide a staleTime value (in milliseconds), the data will be considered fresh for that duration before a refetch is triggered. If you also want to handle scenarios where the initialData might not be totally fresh, you can use the initialDataUpdatedAt option. This option allows you to pass a JS timestamp indicating when the initialData was last updated. This allows React Query to make a decision on whether the data needs to be refetched based on both the staleTime and the timestamp of when the initialData was last updated.