Step-by-Step Guide to Adding User Profiles in React

User profiles are an essential feature of modern web applications, allowing users to manage their personal information and preferences seamlessly. In this guide, you'll learn how to add user profile functionality to your React app, with a focus on ensuring a smooth and secure user experience.

Why User Profiles Matter

User profiles play a key role in personalizing user experiences. They enable users to manage their personal information, settings, and other preferences. A well-implemented user profile system not only enhances user satisfaction but also aids in user retention and engagement.

Prerequisites

Before getting started, ensure you have the following:

• Basic knowledge of React and JavaScript
• Node.js installed on your development machine
• A React app set up (you can use Create React App)
• Authentication system in place (using libraries like Eartho, Firebase, Auth0, etc.)

Tools and Libraries

For this guide, we will use Eartho to handle authentication and user profile management due to its simplicity and comprehensive features.

Step 1: Set Up Your React App

If you don’t already have a React app, set one up using Create React App:

npx create-react-app my-profile-app
cd my-profile-app
npm start

Step 2: Install Eartho SDK

To integrate Eartho, start by installing the Eartho SDK:

npm install @eartho/eartho

Step 3: Initialize Eartho

Set up Eartho in your React app. Create a new file auth.js in your src directory and add the following code:

‍
import Eartho from '@eartho/eartho';

const eartho = new Eartho({
 clientId: 'YOUR_EARTHO_CLIENT_ID',
 domain: 'YOUR_EARTHO_DOMAIN',
});

export default eartho;

Replace YOUR_EARTHO_CLIENT_ID and YOUR_EARTHO_DOMAIN with your actual Eartho client ID and domain, which you can obtain from the Eartho dashboard.

Step 4: Create User Profile Component

Create a user profile component in UserProfile.js to display and edit user information:

‍
import React, { useState, useEffect } from 'react';
import eartho from './auth';

const UserProfile = () => {
 const [user, setUser] = useState(null);

 useEffect(() => {
   const fetchUser = async () => {
     const userData = await eartho.getUser();
     setUser(userData);
   };

   fetchUser();
 }, []);

 const handleUpdateProfile = async (event) => {
   event.preventDefault();
   const updatedUser = {
     ...user,
     [event.target.name]: event.target.value,
   };
   await eartho.updateUser(updatedUser);
   setUser(updatedUser);
 };

 if (!user) return <div>Loading...</div>;

 return (
   <div>
     <h2>User Profile</h2>
     <form onSubmit={handleUpdateProfile}>
       <label>
         Name:
         <input
           type="text"
           name="name"
           value={user.name || ''}
           onChange={handleUpdateProfile}
         />
       </label>
       <label>
         Email:
         <input
           type="email"
           name="email"
           value={user.email || ''}
           onChange={handleUpdateProfile}
         />
       </label>
       <button type="submit">Update Profile</button>
     </form>
   </div>
 );
}

export default UserProfile;

Step 5: Incorporate the UserProfile Component in Your App

Include the UserProfile component in your main app file App.js:‍
‍
import React from 'react';
import UserProfile from './UserProfile';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
 return (
   <Router>
     <div className="App">
       <header className="App-header">
         <h1>Welcome to My Profile App</h1>
       </header>
       <Switch>
         <Route path="/profile" component={UserProfile} />
       </Switch>
     </div>
   </Router>
 );
}

export default App;

Step 6: Protect the Profile Route

Ensure that only authenticated users can access the profile route. Modify your UserProfile.js to include a check for the authentication state:


import React, { useState, useEffect } from 'react';
import eartho from './auth';
import { Redirect } from 'react-router-dom';

const UserProfile = () => {
 const [user, setUser] = useState(null);

 useEffect(() => {
   const fetchUser = async () => {
     const userData = await eartho.getUser();
     setUser(userData);
   };

   fetchUser();
 }, []);

 const handleUpdateProfile = async (event) => {
   event.preventDefault();
   const updatedUser = {
     ...user,
     [event.target.name]: event.target.value,
   };
   await eartho.updateUser(updatedUser);
   setUser(updatedUser);
 };

 if (!eartho.isAuthenticated()) return <Redirect to="/login" />;
 if (!user) return <div>Loading...</div>;

 return (
   <div>
     <h2>User Profile</h2>
     <form onSubmit={handleUpdateProfile}>
       <label>
         Name:
         <input
           type="text"
           name="name"
           value={user.name || ''}
           onChange={handleUpdateProfile}
         />
       </label>
       <label>
         Email:
         <input
           type="email"
           name="email"
           value={user.email || ''}
           onChange={handleUpdateProfile}
         />
       </label>
       <button type="submit">Update Profile</button>
     </form>
   </div>
 );
}

export default UserProfile;

Step 7: Run Your App and Test

Start your React app with npm start and navigate to http://localhost:3000/profile in your browser. Ensure that the profile information is displayed and can be updated successfully.

Conclusion

Adding user profile functionality to your React app enhances personalization and user experience. With Eartho, you can easily manage user authentication and profiles, ensuring both security and flexibility. By following this step-by-step guide, you can create a cohesive and interactive user profile management system within your React application.

This guide provides a step-by-step approach to adding user profile functionality to a React app, ensuring a robust and user-friendly experience. Combining Eartho's authentication capabilities with practical React development tips results in a seamless and secure user profile management system.

‍