DEV Community

Kizito Nwaka
Kizito Nwaka

Posted on

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
;
Enter fullscreen mode Exit fullscreen mode
  • 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} />`
Enter fullscreen mode Exit fullscreen mode
  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

Top comments (0)