@baseapp-frontend/core
v2.7.4
Published
Core utilities.
Downloads
848
Readme
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 behaviormutation
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
- Optional, defaults to
query
- Optional
- query params you can pass to the redirectTo route
Returns
user
user object returned by the APIisLoading
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>
}