@baseapp-frontend/core NPM

`core`

This package holds all common logic and helpers that are used across different apps based on baseapp-nextjs-template

Dependencies: https://react-query.tanstack.com/ https://react-hook-form.com/

Authentication

useLogin

handle login form and execute the login

const { form, mutation } = useLogin({onError, onSuccess})

Options

onError: (err, variables, context) => void - Optional - It will be fired when an error happens when executing the login
onSuccess: (response, variables, context) => void - Optional - Fired when login is successful

Both options are just an shortcut for react-query's mutation's options

Returns

form react-hook-form's instance this is important to build the form's inputs and already handles the onSubmit behavior
mutation react-query's mutation instance that can be used to execute the login at any time.

form usage example:

const { form } = useLogin()
return <form onSubmit={form.handleSubmit}>
  <InputField
    label="Email Address"
    name="email"
    type="email"
    placeholder="Email"
    form={form}
  />

  <PasswordField
    label="Password"
    name="password"
    form={form}
  />
	
  <button type="submit">Login</button>
</form>

mutation usage example, login after a successful signup:

const { mutation: loginMutation } = useLogin()
useSignUp({
  onSuccess: (response, variables) => {
    loginMutation.mutate({
      email: variables.email,
      password: variables.password,
    })
  }
})

useUser

Gets the current user and/or redirect user to another page if necessary

const { user, isLoading } = useUser({redirectTo: '/auth/login', redirectIfFound: false})

Options

redirectTo - Optional - path to send the visitor to
redirectIfFound - Optional, defaults to false - if true will redirect if the users is logged in - if false will redirect if logged out
query
- Optional
- query params you can pass to the redirectTo route

Returns

useruser object returned by the API
isLoading will be true if the user is being fetched from the API

useLogout

const logout = useLogout()
return <button onClick={() => logout()}>Logout</button>

Returns

Returns a function to logout the user

Backend errors on form's fields:

const mutation = useMutation(data => {
  return axios.post('/do-something', data)
}, {
  onError: (err: any, variables, context) => {
    form.setError('fieldName', {type: 'custom', message: err?.response?.data})
  },
  onSettled: (data, error, variables, context) => {
    form.reset()
  }
})

const form = useForm()
const handleSubmit = form.handleSubmit((values: any) => mutation.mutate(values))
const handleAsyncSubmit = form.handleSubmit(async (values: any) => mutation.mutateAsync(values))

API

This package provides the react-query basic setup to be used with baseapp-django.

Setup on a bare-bones project

yarn add @baseapp-frontend/core

Then mount BaseAppProvider in your main app component:

import { BaseAppProvider } from '@baseapp-frontend/core'

function App({ Component, pageProps }: AppProps) {
  return <BaseAppProvider>
    <Component {...pageProps} />
  </BaseAppProvider>
}