Appwrite UI Web

Appwrite UI Web is an open-source JavaScript library for Web that provides simple, customizable UI bindings on top of Appwrite web SDKs to eliminate boilerplate code and promote best practices.

It provides UI Components for signing in or signing up users with email addresses and passwords, phone numbers, Identity Provider Sign In including Google, Facebook, GitHub, Amazon etc. It is built on top of appwrite web SDK.

Demo
Installation
Usage Instructions
- Email Password Sign Up
- Email Password Sign In
- OAuth
- MagicAuth
- Phone

Demo

Screen.Recording.2023-04-13.at.11.43.54.PM.mov

Installation

npm i appwrite-react-ui

Official appwrite docs to install appwrite locally.

Steps to setup locally

Make sure you have node js installed on your machine.

Clone the repo.
Inside the addons folder run npm install to install the required dependencies.
To check out the demo run npm start.
You can find all the components inside the /src/lib/components/Auth folder.

Usage Instructions

Email Password Sign Up

  <EmailPassCreate/>

Name	Type	Required	Description
`client`	`Appwrite Client Object`	`true`	The Appwrite client instance configured with your endpoint and project id
`success`	`function`	`true`	Callback function to be called on successful login
`failure`	`function`	`true`	Callback function to be called on failed login
`buttonText`	`string`	`false (default: 'Sign Up')`	The text to be displayed on the button
`nameRequired`	`boolean`	`false (default: false)`	Set to true if you want the name input field in the sign up form
`userIdRequired`	`boolean`	`false (default: false)`	Set to true if you want the user id input field in the sign up form
`showFailureError`	`boolean`	`false (default: false)`	Set to true if you want to show the error message UI on failure
`validations`	`object`	`false (default: {name: true, email: true, password: true})`	Set the validation rules for the input fields
`buttonStyle`	`object`	`false`	Set custom style for the button
`inputStyle`	`object`	`false`	Set custom style for the input fields

Email Password Sign In

  <EmailPassSignIn/>

Name	Type	Required	Description
`client`	`Appwrite Client Object`	`true`	The Appwrite client instance configured with your endpoint and project id
`success`	`function`	`true`	Callback function to be called on successful login
`failure`	`function`	`true`	Callback function to be called on failed login
`buttonText`	`string`	`false (default: 'Sign In')`	The text to be displayed on the button
`showFailureError`	`boolean`	`false (default: false)`	Set to true if you want to show the error message UI on failure
`validations`	`object`	`false (default: {email: true, password: true})`	Set the validation rules for the input fields
`buttonStyle`	`object`	`false`	Set custom style for the button
`inputStyle`	`object`	`false`	Set custom style for the input fields

OAuth

Make sure you have the OAuth provider setup as required.

  <OAuth/>

Name	Type	Required	Description
`client`	`Appwrite Client Object`	`true`	The Appwrite client instance configured with your endpoint and project id
`provider`	`string`	`true`	The OAuth provider name
`success`	`function`	`true`	Callback function to be called on successful login
`failure`	`function`	`true`	Callback function to be called on failed login
`buttonText`	`string`	`false (default: 'Sign In with {provider}')`	The text to be displayed on the button
`buttonStyle`	`object`	`false`	Set custom style for the button

MagicAuth

In order for emails to work, you will need to setup proper SMTP configuration. Check out the official appwrite docs.

  <MagicAuth/>

Name	Type	Required	Description
`client`	`Appwrite Client Object`	`true`	The Appwrite client instance configured with your endpoint and project id
`url`	`string`	`true`	The URL to which the user will be redirected after successful login
`success`	`function`	`true`	Callback function to be called on successful login
`userIdRequired`	`boolean`	`false (default: false)`	Set to true if you want the user id input field in the sign up form
`buttonText`	`string`	`false (default: 'Sign In with Magic Link')`	The text to be displayed on the button
`buttonStyle`	`object`	`false`	Set custom style for the button
`inputStyle`	`object`	`false`	Set custom style for the input fields
`validations`	`object`	`false (default: {userId: true, email: true})`	Set the validation rules for the input fields

Phone

Appwrite requires an SMS provider to be setup before using Phone authentication. Check out the official appwrite docs.

  <Phone/>

Name	Type	Required	Description
`client`	`Appwrite Client Object`	`true`	The Appwrite client instance configured with your endpoint and project id
`success`	`function`	`true`	Callback function to be called on successful login
`buttonText`	`string`	`false (default: 'Sign In with Phone')`	The text to be displayed on the button
`buttonStyle`	`object`	`false`	Set custom style for the button
`inputStyle`	`object`	`false`	Set custom style for the input fields
`validations`	`object`	`false (default: {userId: true, phoneNumber: true})`	Set the validation rules for the input fields

sahilsaha7773 / appwrite-react-ui