diff --git a/components/auth-form/index.js b/components/auth-form/index.js
new file mode 100644
index 0000000..559727b
--- /dev/null
+++ b/components/auth-form/index.js
@@ -0,0 +1,214 @@
+/* eslint-disable camelcase */
+import PropTypes from 'prop-types'
+import Link from 'next/link'
+import {useState} from 'react'
+import Button from '@mui/material/Button'
+import Container from '@mui/material/Container'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import InputAdornment from '@mui/material/InputAdornment'
+import IconButton from '@mui/material/IconButton'
+import FormControl from '@mui/material/FormControl'
+import FormHelperText from '@mui/material/FormHelperText'
+import OutlinedInput from '@mui/material/OutlinedInput'
+import InputLabel from '@mui/material/InputLabel'
+import Visibility from '@mui/icons-material/Visibility'
+import VisibilityOff from '@mui/icons-material/VisibilityOff'
+
+export default function AuthForm({
+  title,
+  buttonText,
+  onSubmit,
+  linkText,
+  linkHref,
+  linkDescription,
+  isRegister
+}) {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    email: '',
+    password: '',
+    password_verification: ''
+  })
+
+  const [showPassword, setShowPassword] = useState(false)
+  const [showPasswordVerification, setShowPasswordVerification] = useState(false)
+
+  const handleFormSubmit = async e => {
+    e.preventDefault()
+    onSubmit(formData)
+  }
+
+  const handleInputChange = e => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword)
+  }
+
+  const handleMouseDownPassword = event => {
+    event.preventDefault()
+  }
+
+  const handleClickShowPasswordVerifiation = () => {
+    setShowPasswordVerification(!showPasswordVerification)
+  }
+
+  const handleMouseDownPasswordVerification = event => {
+    event.preventDefault()
+  }
+
+  return (
+    <Container
+      maxWidth='sm'
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Box
+        component='form'
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          width: '100%',
+          p: 3,
+          border: '1px solid #ccc',
+          borderRadius: '8px',
+          boxShadow: 3,
+          bgcolor: 'background.paper'
+        }}
+        onSubmit={handleFormSubmit}
+      >
+        <Typography variant='h4' component='h1' align='center'>
+          {title}
+        </Typography>
+        {isRegister && (
+          <FormControl required>
+            <InputLabel htmlFor='first_name'>Pseudo</InputLabel>
+            <OutlinedInput
+              required
+              fullWidth
+              label='Pseudo'
+              name='first_name'
+              id='first_name'
+              value={formData.first_name}
+              onChange={handleInputChange}
+            />
+          </FormControl>
+        )}
+        <FormControl required>
+          <InputLabel htmlFor='email'>E-mail</InputLabel>
+          <OutlinedInput
+            required
+            fullWidth
+            autoComplete='email'
+            label='E-mail'
+            type='email'
+            name='email'
+            id='email'
+            value={formData.email}
+            onChange={handleInputChange}
+          />
+        </FormControl>
+        <FormControl required>
+          <InputLabel htmlFor='password'>Mot de passe</InputLabel>
+          <OutlinedInput
+            required
+            fullWidth
+            autoComplete='new-password' // Disable auto complete
+            label='Mot de passe'
+            type={showPassword ? 'text' : 'password'}
+            name='password'
+            id='password'
+            endAdornment={
+              <InputAdornment position='end'>
+                <IconButton
+                  aria-label='password visibility'
+                  size='large'
+                  onClick={handleClickShowPassword}
+                  onMouseDown={handleMouseDownPassword}
+                >
+                  {showPassword ? <Visibility /> : <VisibilityOff />}
+                </IconButton>
+              </InputAdornment>
+            }
+            value={formData.password}
+            onChange={handleInputChange}
+          />
+        </FormControl>
+        {isRegister && (
+          <FormControl required error={formData.password !== formData.password_verification}>
+            <InputLabel htmlFor='password_verification'>Vérification du mot de passe</InputLabel>
+            <OutlinedInput
+              fullWidth
+              autoComplete='new-password' // Disable auto complete
+              label='Vérification du mot de passe'
+              type={showPasswordVerification ? 'text' : 'password'}
+              name='password_verification'
+              id='password_verification'
+              value={formData.password_verification}
+              error={formData.password !== formData.password_verification}
+              aria-describedby='password_verification'
+              endAdornment={
+                <InputAdornment position='end'>
+                  <IconButton
+                    aria-label='password visibility'
+                    size='large'
+                    onClick={handleClickShowPasswordVerifiation}
+                    onMouseDown={handleMouseDownPasswordVerification}
+                  >
+                    {showPasswordVerification ? <Visibility /> : <VisibilityOff />}
+                  </IconButton>
+                </InputAdornment>
+              }
+              onChange={handleInputChange}
+            />
+            {formData.password !== formData.password_verification && (
+              <FormHelperText id='password_verification'>Les mots de passe ne correspondent pas !</FormHelperText>
+            )}
+          </FormControl>
+        )}
+        <Button fullWidth variant='contained' color='success' type='submit'>
+          {buttonText}
+        </Button>
+        <Typography variant='body2' align='center'>
+          {linkDescription}{' '}
+          <Link passHref href={linkHref}>
+            <Button color='success'>{linkText}</Button>
+          </Link>
+        </Typography>
+        {!isRegister && (
+          <Typography align='center'>
+            <Link passHref style={{color: 'white'}} href='/request-reset-password'>
+              Mot de passe oublié
+            </Link>
+          </Typography>
+        )}
+      </Box>
+      <Typography align='center' mt={2}>
+        <Link passHref style={{color: 'white'}} href='/'>
+          Retourner à l’accueil
+        </Link>
+      </Typography>
+    </Container>
+  )
+}
+
+AuthForm.propTypes = {
+  title: PropTypes.string.isRequired,
+  buttonText: PropTypes.string.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  linkText: PropTypes.string.isRequired,
+  linkHref: PropTypes.string.isRequired,
+  linkDescription: PropTypes.string.isRequired,
+  isRegister: PropTypes.bool.isRequired
+}