DEV Community: Michael Marcoux

Data fetching with React Router

Michael Marcoux — Tue, 02 May 2023 01:40:09 +0000

This blog will cover several ways that you can fetch data without a useEffect hook using the React Router library. Following these steps will allow you to write cleaner, more intuitive code as all of your data fetching will occur in a single React Router component called a BrowserRouter.

This tutorial assumes you have a functioning React app with React Router v6.4 installed. My recommendation for beginners is to use the Vite development environment and following the React Router tutorial here.

Step 1: Create your BrowserRouter

The React Router tutorial linked above will cover the BrowserRouter component in greater depth, though I wanted to fill in the gaps that I encountered while setting up my first Vite + React Router app. If you already have your Browser Router set up, skip this step.

After getting started with the Vite/React template, your project root directory should contain a src directory with components and routes directories listed inside of it. Inside of the src directory, you should have a main.jsx file. This file represents your parent JSX file and is the only JSX file referenced in your HTML document.

your_project/src/main.jsx

At the top of main.jsx import the necessary components from React Router.

import React from 'react'
import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'

After all of your imports, add the BrowserRouter component using the following structure:

const router = createBrowserRouter([
  {
    element: <Root />,
    id: "root",
    children: [
        {
          path: '/',
          element: <Home />
        },
        {
          path: '/*your_route*',
          element: <*Your_Route_Component* />
        },
        ...
    ]
  }
]}

Finally, add the following to the bottom of your main.jsx file:

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
)

See these React Router docs for more support on this step.

Step 2: Using the 'loader' API

At this point, it is best to think about which routes you will need to send data to. In this example, I will go over using the loader API to fetch data for the Root component for global use across my application (similar to passing state via React context) as well as fetching data on an individual route level.

Adding a loader to the Root component:
As mentioned above, this technique is especially useful if there is data that you will need in multiple components across your web application.

Going back to your router component in the main.jsx file, add the following under the id key:

loader: async () => {
  return fetch(`your_fetch_url`);
},

Your component should now look like this:

const router = createBrowserRouter([
  {
    element: <Root />,
    id: "root",
    loader: async () => {
      return fetch(`your_fetch_url`);
    },
    children: [
    ...
    ]
  }
]}

Sweet! Now your data is available in any child component when you import it with reference to its id: root.

Adding a loader to a child component
If you want to fetch data for a specific child component, the syntax is the same, but you will not need to include a value for id.

...
{
  path: '/*your_route*',
  element: <*Your_Route_Component* />
  loader: async () => {
      return fetch(`your_fetch_url`);
  },
},
...

Step 3: Importing the fetched data

Now that you've set up your BrowserRouter to fetch data, you can navigate to your various components and import it. In order to import the data you fetched at your 'root' level, import the following at the top of your component:

import React from 'react'
import ReactDOM from 'react-dom/client'
import { useRouteLoaderData } from "react-router-dom";

Next, create a variable using the imported hook:

export default function YourComponent () {
  const your_data = useRouteLoaderData("root")
  ....
}

Notice how the useRouteLoader data hook takes a route id as a parameter. You can find more information about this hook here.

Importing data that you fetched directly to a component is similar, except you will use the useLoaderData hook instead and not specify a route id.

import { useLoaderData } from "react-router-dom"

export default function YourComponent () {
 const your_data = useLoaderData()

Amazing! You've now fetched your data for various components without a single useEffect. Your code is cleaner, and you can easily see which data is going to each of your routes in the BrowserRouter component.

Adding 'Sign in with Google' to your site with vanilla JS

Michael Marcoux — Thu, 06 Apr 2023 20:11:51 +0000

This blog is going to be a step-by-step guide on how to quickly add a 'Sign in with Google' button to your website. You won't need to install any modules for this to work. At the end, you'll be able to sign in with your Google account and use the data returned from the Google OAuth API to run conditional JS functions on your website.

I decided to put this together because I believe that a Google login is slicker and more functional than a bootstrapped HTML form, but I couldn't find a step-by-step resource oriented toward beginners. Please comment below your thoughts and any questions/issues you have while following these instructions. Happy coding!

Please note that this guide will feature macOS/Linux terminal commands. If you are running Windows, you will have to research the corresponding command prompt syntax.

Prerequisites:

A HTML & JS file open in your code editor of choice
A Google account
Python installed (installation guide)

Links you'll need:

Step 1: Get your site running on a localhost server

This step with require the use of a Python command. If you do not have Python installed, follow the guide provided under 'Prerequisites'.

Navigate to the working directory in which your website lives. Make sure you have created HTML & JS files there. Your HTML file should contain at least one line of code.

Run the following Python command in your terminal.



python3 -m http.server

You should see the following output.

Navigate to http://localhost:8000 in your browser. You should see your site! When you are done working, you can use 'Ctrl + c' in the same terminal to terminate the server.

Having issues? If you are getting a different output, try the following steps.

Verify you have Python installed by running this command in a new terminal.



python3 -v

If you see a version number in the output, go ahead and terminate that terminal and check to see which ports are open with this command in a new terminal.



lsof -i -P | grep -i "listen"

In the image below, you can see that Python is running on port :8000 with the portID 30098.

If something else is running on port 8000, use the following command to terminate the port. Use the value found in the previous command for 'portID'.



kill portID

Step 2: Create a Google Cloud project

Navigate to the Credentials API Dashboard and click to create a new project.

Once you have followed all of the prompts, navigate back to the dashboard if you are not automatically directed there.

Step 3: Create your OAuth consent screen

Click 'OAuth consent screen' in the left-side navigation and enter an app name, user support email, and developer contact information. The rest of the fields can be left blank.

Continue clicking 'SAVE AND CONTINUE' until you are at the summary page and then navigate back to the dashboard. You do not need to fill out the 'Scope' or 'Optional Information' prompts.

Step 4: Create your OAuth 2.0 Client ID

Click 'Credentials' in the left-side navigation, click 'CREATE CREDENTIALS' at the top of the page, and then click 'OAuth client ID'.

Add a client name, and then add http://localhost:8000 and http://localhost under both the 'Authorized JavaScript origins' and 'Authorized redirect URIs' sections.

Note that this screen is where you can find your 'Client ID'. Click 'SAVE' and navigate back to the dashboard.

If anything from steps 3 & 4 was confusing, checking out the Google authentication docs may be helpful.

Step 5: Configure your HTML headers

Per the docs linked above, you'll need to add two headers to your HTML document so that your login works with a localhost server.



<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="Cross-Origin-Opener-Policy" content="same-origin-allow-popups">

While we're here, check that your JS document is linked to your HTML document. If you choose to link it in the header as I have done, it is best practice to include the defer keyword.

Step 6: Generate your button code

Follow this link to the HTML code generator.

Add your Client ID, choose 'Swap to JavaScript callback', and then enter a name for your callback function.

In this example, we have to use a JS callback rather than a Login URI because we are using a localhost server.

Toggle the 'Enable Sign in with Google button', and make sure 'In a popup' is selected under the 'Behavior' dropdown.

Edit the styling options as you wish, and then click 'Get code'. Copy the code output to your clipboard.

In this example, we have not enabled OneTap as that requires additional configuration not covered in this blog.

Step 7: Add the button to your HTML

Paste the code in your HTML document nested somewhere between your <body> tags. I recommend creating a parent <div> around the login button code for styling purposes.

Hint: You can use Cmd + k then Cmd + f on a selection in VS Code to automatically format it.

Step 8: Add OAuth scripts to the bottom of your HTML doc

Add the following scripts to the bottom of the <body> section in your HTML document. The first script loads the Google client library and the second is the callback function that will handle the API response.



<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
    function handleCredentialResponse(response) {
        decodeJwtResponse(response.credential);
    }
</script>

In the callback function you'll notice I invoke another function called decodeJwtResponse. This function parses the JSON web token (JWT) that is returned from the Google API upon sign in. This JWT contains account information from the Google user that signed in via your button. Once parsed, you can store this information in different variables to supplement functionality on your webpage.

If this step is confusing, check out Google's documentation on loading the client library and handling the credential response.

Step 9: Parsing the JWT in your JS file

Parsing the JSON web token (JWT) can be accomplished several ways. In this example, I'm going to use a solution from Stack Overflow that doesn't require a library. If you would like to experiment with libraries, check them out here.

Navigate to your JS file and add the following function.



function parseJwt (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
}

Now pass it the JWT by adding a second function.



function decodeJwtResponse(data){
    signIn(parseJwt(data))
}

This second function is invoked in the handleCredentialResponse callback and is where you can invoke other functionality related to signing in for your website. In the above example, I chose to invoke a function called signIn that takes the parsed JWT from the parseJWT function. If you would like to simply see the parsed JWT in your console log, replace signIn(parseJwt(data)) with console.log(parseJwt(data)).

That's all there is to this blog! Thank you for following along. Feel free to comment below with your thoughts/questions.