Web Developers : 13-Retrieving the Current Session of an Authenticated User in React from Appwrite 4 minutes

Screenshot from the tutorial

Retrieving the Current Session of an Authenticated User in React from Appwrite

In modern web development, managing user authentication is crucial for building secure applications. Appwrite, an open-source backend as a service (BaaS), simplifies this process by providing a robust authentication system. In this tutorial, we'll explore how to retrieve the current session of an authenticated user in a React application using Appwrite.

Prerequisites

Before we dive into the implementation, ensure you have the following:

• Basic knowledge of React
• An Appwrite server set up and running
• An Appwrite project with authentication enabled
• Node.js and npm installed on your machine

Setting Up Your React Application

First, let's set up a new React application if you haven't done so already. Open your terminal and run the following command:

npx create-react-app appwrite-auth-example
cd appwrite-auth-example

Next, install the Appwrite SDK for JavaScript:

npm install appwrite

Configuring Appwrite

To connect your React application to your Appwrite server, you need to configure the Appwrite SDK. Create a new file named appwrite.js in the src directory and set up your client:

// src/appwrite.js
import { Client } from 'appwrite';

const client = new Client();

client
  .setEndpoint('https://[YOUR_APPWRITE_ENDPOINT]') // Your Appwrite endpoint
  .setProject('[YOUR_PROJECT_ID]'); // Your project ID

export default client;

Replace [YOUR_APPWRITE_ENDPOINT] and [YOUR_PROJECT_ID] with your actual Appwrite endpoint and project ID.

Authenticating Users

Before retrieving the current session, users need to authenticate. We'll create a simple login form to allow users to sign in. Create a new component named Login.js:

// src/Login.js
import React, { useState } from 'react';
import { Account } from 'appwrite';
import client from './appwrite';

const account = new Account(client);

const Login = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async (event) => {
    event.preventDefault();
    try {
      await account.createSession(email, password);
      alert('Logged in successfully!');
    } catch (error) {
      console.error(error);
      alert('Failed to log in.');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        required
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default Login;

Retrieving the Current User Session

Now that we have a way for users to log in, let's create a component that retrieves the current session information. Create a new file named UserSession.js:

// src/UserSession.js
import React, { useEffect, useState } from 'react';
import { Account } from 'appwrite';
import client from './appwrite';

const account = new Account(client);

const UserSession = () => {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUserSession = async () => {
      try {
        const response = await account.get();
        setUser(response);
      } catch (error) {
        console.error(error);
        setUser(null);
      } finally {
        setLoading(false);
      }
    };

    fetchUserSession();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {user ? (
        <div>
          <h2>Welcome, {user.name}</h2>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <p>No user is currently logged in.</p>
      )}
    </div>
  );
};

export default UserSession;

Integrating the Components

Finally, let's integrate both the Login and UserSession components in the App.js file:

// src/App.js
import React from 'react';
import Login from './Login';
import UserSession from './UserSession';

const App = () => {
  return (
    <div>
      <h1>Appwrite Authentication Example</h1>
      <UserSession />
      <Login />
    </div>
  );
};

export default App;

Testing Your Application

Now that everything is set up, start your React application:

npm start

Navigate to http://localhost:3000 in your browser. You should see the login form and the user session information. After logging in with valid credentials, you'll see a welcome message displaying the user's name and email.

Conclusion

In this tutorial, we explored how to retrieve the current session of an authenticated user in a React application using Appwrite. We set up a simple authentication flow, allowing users to log in and view their session information. With Appwrite's powerful SDK, managing authentication becomes straightforward and efficient.

Feel free to expand upon this example by adding features like user registration, password reset, and more. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios