Summary: React UI Library for Appwrite Functions

This project briefly explains how the implementation of Appwrite functions was integrated as a UI library.

It replaces the code for sign up, sign in, reset password, logout, etc. with UI components that users can easily implement in their projects by simply installing the package. However, the project is not yet live on npm.

This UI library is built for React and is developed using React and Vanilla JavaScript with some CSS, and it is compiled by Babel. The project was challenging, and I learned about installing Docker and how the Appwrite package works.

Usage
`

• Create your react app
• Config file setup
• Inside your src folder make appwriteConfig.js file

By default appwriteConfig.js contain this info
import { Client, Account } from "appwrite";

const client = new Client();

const account = new Account(client);

client
    .setEndpoint('http://localhost:106/v1') // Your API Endpoint
    .setProject('6425d19c7a8619e5cb51') // Your project ID
;

• Inside your client folder(or root folder name can vary) install react-appwrite-auth-library using
• npm i react-appwrite-auth-library
• In your .js/.jsx folder
• import component for use

import Authsignup from "react-appwrite-auth-library/Authsignup";

<Authsignup/> here takes email, password, and name as props. It can also have an inline styling Authstyle as inline prop styling.
const Authstyle = {
    color: "red"
}
<Authsignup email={email} password={password} name={name} Authstyle={Authstyle} />`

1. Authdelete - Button to delete a user.
2. AuthGuestLogin - Button for a user to login as guest
3. AuthInitiateResetPassword - Button to initiate a password reset link.
4. AuthJWT - Button to create a JsonWebToken
5. AuthLogin - Button to create a user session
6. AuthLoginWithPhone - Login with phone number component
7. AuthLogout - Button to dismiss a user session
8. AuthMagicUrl - Component to create a magic url session
9. AuthResetPassword - Button to reset password
10. Authsignup - Component to sign up a user
11. AuthVerifyMagicUrl - Component to verify magic URL session
12. AuthVerifyPhone - Button to verify phone number
13. OAuth - Sign in with providers like google

Github