Web Developers : 12-Creating and Verifying New Authenticated Users in React with AppWrite

Screenshot from the tutorial

Creating and Verifying New Authenticated Users in React with AppWrite

In the modern web development landscape, authentication is a crucial component for creating secure and interactive applications. This blog post will guide you through the process of creating and verifying new authenticated users in a React application using AppWrite, a powerful backend-as-a-service platform.

What is AppWrite?

AppWrite is an open-source backend server that simplifies the process of building and managing web applications. It provides a variety of features, including authentication, databases, storage, and more, allowing developers to focus on building their front-end applications without worrying about backend complexities.

Prerequisites

Before we start, ensure you have the following:

• A basic understanding of React
• Node.js and npm installed on your machine
• An AppWrite server set up (you can run it locally or on a cloud service)
• An AppWrite project created

Setting Up Your React Application

First, let’s create a new React application. Open your terminal and run:

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

Next, install the AppWrite SDK:

npm install appwrite

Configuring AppWrite in Your Application

Create a new file named appwriteConfig.js in the src directory. This file will hold the configuration for connecting to your AppWrite server.

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

const client = new Client();

client
  .setEndpoint('http://localhost/v1') // Your AppWrite API endpoint
  .setProject('YOUR_PROJECT_ID'); // Your project ID

export const account = new Account(client);

Replace YOUR_PROJECT_ID with your actual AppWrite project ID.

Creating a New User

Now, let’s create a form that will allow users to sign up. Create a new component called Signup.js in the src directory.

// src/Signup.js
import React, { useState } from 'react';
import { account } from './appwriteConfig';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await account.create('unique()', email, password);
      setMessage('User created successfully!');
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <div>
      <h2>Sign Up</h2>
      <form onSubmit={handleSubmit}>
        <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">Sign Up</button>
      </form>
      {message && <p>{message}</p>}
    </div>
  );
};

export default Signup;

Explanation of the Signup Component

• State Management: We use the useState hook to manage the email, password, and message states.
• handleSubmit: This function is triggered when the form is submitted. It calls the create method of the AppWrite account object to create a new user.
• Form: The form captures user input for email and password and displays messages based on the success or failure of the user creation.

Verifying Users

To verify users, we will create a simple login component. Create a new file named Login.js in the src directory.

// src/Login.js
import React, { useState } from 'react';
import { account } from './appwriteConfig';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await account.createSession(email, password);
      setMessage('Login successful!');
    } catch (error) {
      setMessage(error.message);
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <form onSubmit={handleSubmit}>
        <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>
      {message && <p>{message}</p>}
    </div>
  );
};

export default Login;

Explanation of the Login Component

• Functionality: This component collects user email and password and attempts to create a session using the createSession method.
• Feedback: After submitting, it provides feedback based on whether the login was successful or resulted in an error.

Integrating Signup and Login Components

To test both components, you can modify the App.js file to include them.

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

const App = () => {
  return (
    <div>
      <Signup />
      <Login />
    </div>
  );
};

export default App;

Running Your Application

Now that you've set up both components, run your application using:

npm start

Navigate to http://localhost:3000, and you should see both the signup and login forms. You can create a new user and then log in with the same credentials.

Conclusion

In this tutorial, you learned how to create and verify authenticated users in a React application using AppWrite. This powerful backend service simplifies user management, allowing you to focus on building your application’s features.

Feel free to explore more functionalities that AppWrite offers, including database management, file storage, and more, to enhance your React applications further. 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