Authentication
Auth forms used to register and sign users with email-password and OAuth solutions.
Login with centred form
import {
Box,
Button,
Heading,
SimpleGrid,
Text,
useColorModeValue as mode,
VisuallyHidden,
} from '@chakra-ui/react'
import * as React from 'react'
import { Logo } from './Logo'
import { LoginForm } from './LoginForm'
import { FaFacebook, FaGoogle, FaGithub } from 'react-icons/fa'
import { DividerWithText } from './DividerWithText'
export const App = () => {
return (
<Box bg={mode('gray.50', 'inherit')} minH="100vh" py="12" px={{ sm: '6', lg: '8' }}>
<Box maxW={{ sm: 'md' }} mx={{ sm: 'auto' }} w={{ sm: 'full' }}>
<Box mb={{ base: '10', md: '28' }}>
<Logo mx="auto" h="8" iconColor={mode('blue.600', 'blue.200')} />
</Box>
<Heading mt="6" textAlign="center" size="xl" fontWeight="extrabold">
Sign in to your account
</Heading>
<Text mt="4" align="center" maxW="md" fontWeight="medium">
<span>Don't have an account?</span>
<Box
as="a"
marginStart="1"
href="#"
color={mode('blue.600', 'blue.200')}
_hover={{ color: 'blue.600' }}
display={{ base: 'block', sm: 'revert' }}
>
Start free trial
</Box>
</Text>
</Box>
<Box maxW={{ sm: 'md' }} mx={{ sm: 'auto' }} mt="8" w={{ sm: 'full' }}>
<Box
bg={mode('white', 'gray.700')}
py="8"
px={{ base: '4', md: '10' }}
shadow="base"
rounded={{ sm: 'lg' }}
>
<LoginForm />
<DividerWithText mt="6">or continue with</DividerWithText>
<SimpleGrid mt="6" columns={3} spacing="3">
<Button color="currentColor" variant="outline">
<VisuallyHidden>Login with Facebook</VisuallyHidden>
<FaFacebook />
</Button>
<Button color="currentColor" variant="outline">
<VisuallyHidden>Login with Google</VisuallyHidden>
<FaGoogle />
</Button>
<Button color="currentColor" variant="outline">
<VisuallyHidden>Login with Github</VisuallyHidden>
<FaGithub />
</Button>
</SimpleGrid>
</Box>
</Box>
</Box>
)
}
import { Box, Divider, Flex, FlexProps, useColorModeValue as mode } from '@chakra-ui/react'
import * as React from 'react'
export const DividerWithText = (props: FlexProps) => (
<Flex align="center" color="gray.300" {...props}>
<Box flex="1">
<Divider borderColor="currentcolor" />
</Box>
<Box as="span" px="3" color={mode('gray.600', 'gray.400')} fontWeight="medium">
{props.children}
</Box>
<Box flex="1">
<Divider borderColor="currentcolor" />
</Box>
</Flex>
)
import { Button, FormControl, FormLabel, Input, Stack } from '@chakra-ui/react'
import * as React from 'react'
import { PasswordField } from './PasswordField'
export const LoginForm = () => {
return (
<form
onSubmit={(e) => {
e.preventDefault()
// your login logic here
}}
>
<Stack spacing="6">
<FormControl id="email">
<FormLabel>Email address</FormLabel>
<Input name="email" type="email" autoComplete="email" required />
</FormControl>
<PasswordField />
<Button type="submit" colorScheme="blue" size="lg" fontSize="md">
Sign in
</Button>
</Stack>
</form>
)
}
import { chakra, HTMLChakraProps, useToken } from '@chakra-ui/react'
import * as React from 'react'
export const Logo = (props: HTMLChakraProps<'svg'> & { iconColor?: string }) => {
const { iconColor = 'currentColor', ...rest } = props
const color = useToken('colors', iconColor)
return (
<chakra.svg viewBox="0 0 123 24" fill="none" {...rest}>
<path
d="M23 0H7a1 1 0 00-1 1v16H3c-1.654 0-3 1.346-3 3v4h14v-3.583c0-.808.645-1.417 1.5-1.417.723 0 1.5.47 1.5 1.5 0 1.93 1.57 3.5 3.5 3.5s3.5-1.57 3.5-3.5V1a1 1 0 00-1-1zM12 20.417V22H2v-2a1 1 0 011-1h9.304c-.196.43-.304.909-.304 1.417zM20 13H10v-2h10v2zm0-6H10V5h10v2z"
fill={color}
/>
<path
d="M36.102 19h10.142v-2.855h-6.627v-2.99h6.108v-2.862h-6.108V7.31h6.627V4.455H36.102V19zM51.518 12.778c.007-1.242.732-1.981 1.833-1.981 1.1 0 1.754.724 1.747 1.932V19h3.473v-6.953c.007-2.457-1.492-4.098-3.786-4.098-1.612 0-2.833.817-3.316 2.145h-.121V8.09h-3.303V19h3.473v-6.222zM70.513 8.09h-3.658l-2.017 7.515h-.113l-2.01-7.514h-3.658L62.793 19h3.977l3.743-10.91zM76.192 19.206c2.863 0 4.745-1.385 5.142-3.53l-3.189-.092c-.27.724-.98 1.115-1.889 1.115-1.335 0-2.159-.888-2.159-2.223v-.092h7.273v-.867c0-3.594-2.188-5.568-5.284-5.568-3.296 0-5.412 2.258-5.412 5.64 0 3.493 2.088 5.617 5.518 5.617zm-2.095-6.84c.05-1.086.91-1.91 2.06-1.91 1.143 0 1.967.796 1.981 1.91h-4.04zM86.217 4.455h-3.473V19h3.473V4.455zM93.12 19.206c3.43 0 5.511-2.266 5.511-5.625 0-3.367-2.08-5.632-5.511-5.632-3.43 0-5.512 2.265-5.512 5.632 0 3.36 2.081 5.625 5.512 5.625zm.021-2.62c-1.285 0-1.996-1.222-1.996-3.026 0-1.811.71-3.04 1.996-3.04 1.243 0 1.953 1.229 1.953 3.04 0 1.804-.71 3.025-1.953 3.025zM100.01 23.091h3.473v-5.86h.071c.441 1.01 1.421 1.925 3.068 1.925 2.415 0 4.361-1.889 4.361-5.603 0-3.85-2.059-5.604-4.339-5.604-1.726 0-2.671 1.008-3.09 2.01h-.106V8.09h-3.438v15zm3.402-9.546c0-1.782.739-2.883 2.01-2.883 1.286 0 1.996 1.13 1.996 2.883 0 1.762-.71 2.905-1.996 2.905-1.271 0-2.01-1.136-2.01-2.904zM117.503 19.206c2.862 0 4.744-1.385 5.142-3.53l-3.189-.092c-.27.724-.98 1.115-1.89 1.115-1.335 0-2.159-.888-2.159-2.223v-.092h7.273v-.867c0-3.594-2.187-5.568-5.284-5.568-3.295 0-5.412 2.258-5.412 5.64 0 3.493 2.088 5.617 5.519 5.617zm-2.096-6.84c.05-1.086.909-1.91 2.06-1.91 1.144 0 1.967.796 1.982 1.91h-4.042z"
fill="currentColor"
/>
</chakra.svg>
)
}
import {
Box,
Flex,
FormControl,
FormLabel,
IconButton,
Input,
InputGroup,
InputProps,
InputRightElement,
useDisclosure,
useMergeRefs,
useColorModeValue as mode,
} from '@chakra-ui/react'
import * as React from 'react'
import { HiEye, HiEyeOff } from 'react-icons/hi'
export const PasswordField = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { isOpen, onToggle } = useDisclosure()
const inputRef = React.useRef<HTMLInputElement>(null)
const mergeRef = useMergeRefs(inputRef, ref)
const onClickReveal = () => {
onToggle()
const input = inputRef.current
if (input) {
input.focus({ preventScroll: true })
const length = input.value.length * 2
requestAnimationFrame(() => {
input.setSelectionRange(length, length)
})
}
}
return (
<FormControl id="password">
<Flex justify="space-between">
<FormLabel>Password</FormLabel>
<Box as="a" color={mode('blue.600', 'blue.200')} fontWeight="semibold" fontSize="sm">
Forgot Password?
</Box>
</Flex>
<InputGroup>
<InputRightElement>
<IconButton
bg="transparent !important"
variant="ghost"
aria-label={isOpen ? 'Mask password' : 'Reveal password'}
icon={isOpen ? <HiEyeOff /> : <HiEye />}
onClick={onClickReveal}
/>
</InputRightElement>
<Input
ref={mergeRef}
name="password"
type={isOpen ? 'text' : 'password'}
autoComplete="current-password"
required
{...props}
/>
</InputGroup>
</FormControl>
)
})
PasswordField.displayName = 'PasswordField'
# Getting Started
All of the components in Chakra UI are designed for Chakra UI v1.0+<br>
#In some components we use `react-icons` to pep up the visual appearance. Feel free to replace them with your own icons.
## Installation
Inside your React project directory, install Chakra UI by running either of the following:
```sh
# npm
$ npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```
or when using yarn:
```sh
# yarn
yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion react-icons
```
## Setup Chakra UI
For Chakra UI to work correctly, you need to setup the ChakraProvider at the root of your application.
```tsx
import * as React from 'react'
import { ChakraProvider } from '@chakra-ui/react'
export const App = () => {
return (
<ChakraProvider>
<App />
</ChakraProvider>
)
}
```
## Chakra UI Docs
If you need more help, feel free to visit the [official webiste](https://chakra-ui.com) of Chakra UI. Here you can find help with installation, theming and much more.