JSPM – react-appwrite-auth-ui@1.2.0

Package Exports

react-appwrite-auth-ui
react-appwrite-auth-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-appwrite-auth-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

What is React Appwrite Auth UI 🤔?

React appwrite Auth UI is a set of highly customizable React components that uses the Appwrite SDK to communicate with the Appwrite backend and provide a simple way to use the Appwrite authentication services like signin with email ,anonymous signin , sign in with magic link, etc .

Why use React Appwrite Auth UI 🫤?

Using components from our library is lot easier and faster than writing your own components with logic from scratch .
React Appwrite Auth UI library consists of well tested and documented component with easy to use API .
Components in React Appwrite Auth UI are well styled with pink Design .
The npm package ships with typedefinitions .

How to install React Appwrite Auth UI 🪛?

In you React App install npm package from terminal by running command:

With NPM

npm install appwrite @appwrite.io/pink  react-appwrite-auth-ui

With Yarn

yarn add appwrite @appwrite.io/pink react-appwrite-auth-ui

How to use the library 🧑‍💻 ?

1. Wrap your React App Component with AppwriteAuthUIProvider and pass instance of Account and Client as props to it .

// index.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
// import pink design
import "@appwrite.io/pink"

// initialize Appwrite client and account with Appwrite SDK
import {Client ,Account} from "appwrite"
import { AppwriteAuthUIProvider } from "react-appwrite-auth-ui"

const endpoint = 'https://[HOSTNAME_OR_IP]/v1' // Your API Endpoint
const projectId = '5df5acd0d48c2' // Your project ID

const client = new Client().setEndpoint(endpoint).setProject(projectId)
const account = new Account(client)

// Wrap the App with Appwrite Provider
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <AppwriteAuthUIProvider client={client} account={account}>
      <App />
    </AppwriteAuthUIProvider>
  </React.StrictMode>,
)

// MyEmailSignupForm.jsx 

import React from 'react'
import {Button, EmailSignupForm, FormControl} from "react-appwrite-auth-ui"

const MyEmailSignupForm = () => {
  const [email, setEmail] = React.useState("")
  const [password, setPassword] = React.useState("")

  const onAuthSuccess = (response) => {
    console.log("error in signup" , error)
  }

  const onAuthError = (error) => {
    console.log('success in email signup', response)
  }

  return (
    <EmailSignupForm 
      email={email}
      password={password}
      onAuthError={onAuthError}
      onAuthSuccess={onAuthSuccess}
      >
        <FormControl 
          label='Email' 
          type='email'
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          />

        <FormControl 
          label='Password' 
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          />

        <Button type='submit'> Submit </Button>
    </EmailSignupForm>
  )
}

export default MyEmailSignupForm

3. Import MyEmailSignupForm in App.jsx

// App.jsx

import React from 'react'
import MyEmailSignupForm from "./MySignupForm"

export default function App(){
  return (
    <div>
      <MyEmailSignupForm />
    </div>
}

react-appwrite-auth-ui