@caminkunick/firebase-signin-ui

Made with create-react-library

Install

npm install --save @caminkunick/firebase-signin-ui

Usage

import React, { useState } from 'react'
import { FirebaseOptions } from 'firebase/app'
import { FirebaseSignInUI, FSUIConfig } from '@caminkunick/firebase-signin-ui'
import '@caminkunick/firebase-signin-ui/dist/index.css'
import { Typography } from '@mui/material'

export let firebaseConfig: FirebaseOptions = { ...config }

const App = () => {
  const [open, setOpen] = useState<boolean>(false)

  const handleOpen = (open: boolean) => () => setOpen(open)
  const config: FSUIConfig = {
    providers: ['google'],
    callback: (user) => console.log(user),
    onError: (err) => console.warn(err.message)
  }

  return (
    <FirebaseSignInUI
      firebaseConfig={firebaseConfig}
      title='Welcome'
      open={open}
      onClose={handleOpen(false)}
      config={config}
    />
  )
}

Property

Prop	Type	Default	Description
firebaseConfig*	FirebaseOptions		config value from firebase console
title	ReactNode		title Element of tab sign in with E-mail
variant	'dialog' | 'fluid'	'fluid'	title Element of tab sign in with E-mail
open	boolean	false	visibility state if variant is "dialog"
onClose	func		close function when click backdrop or close button
componentProps	{   container?: { noBorder?: boolean } & BoxProps,   textField?: TextFieldProps }		additions properties for component
config*	FSUIConfig		config values
translate	{ [key in TranslateKeys]?: string }		translate dict

Config

Prop	Type	Default	Description
providers	Array< 'google' | 'facebook' | 'apple' | 'twitter' | 'github' | 'microsoft' | 'yahoo' >		array of provider
callback*	func		Signature: function(user: User) => void User is prop from firebase/auth
onError	func		Signature: function(error:Error) => void

Translate

Key
auth/auth-not-found
auth/email-already-in-use
auth/invalid-email
auth/user-not-found
auth/wrong-password
Back
ConfirmPassword
Email
ForgetPassword
InvalidFormat
Password
Password8Chars
PasswordNotMatch
PleaseWait
SendEmail
SignIn
SignOut
SignUp

const translate:{ [key in TranslateKey]:string } = {
  "auth/auth-not-found":  "ไม่พบ Auth",
  "auth/email-already-in-use":  "อีเมลได้ถูกใช้งานแล้ว",
  "auth/invalid-email": "อีเมลไม่ถูกต้อง",
  "auth/user-not-found":  "ไม่พบผู้ใช้งานนี้",
  "auth/wrong-password":  "รหัสผ่านไม่ถูกต้อง",
  "Back": "กลับ",
  "ConfirmPassword":  "ยืนยันรหัสผ่าน",
  "Email":  "อีเมล",
  "ForgetPassword": "ลืมรหัสผ่าน",
  "InvalidFormat":  "ไม่ถูกต้อง",
  "Password": "รหัสผ่าน",
  "Password8Chars": "รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร",
  "PasswordNotMatch": "รหัสผ่านไม่ตรงกัน",
  "PleaseWait": "กรุณารอสักครู่",
  "SendEmail":  "ส่งอีเมล",
  "SignIn": "เข้าสู่ระบบ",
  "SignOut": "ออกจากระบบ",
  "SignUp": "สมัครสมาชิก"
}

License

MIT © caminkunick