Create AuthAlert component

components/auth-form/auth-alert.js

@@ -0,0 +1,35 @@
+import PropTypes from 'prop-types'
+import Snackbar from '@mui/material/Snackbar'
+import Alert from '@mui/material/Alert'
+
+export default function AuthAlert({isOpen, setIsOpen, message, severity}) {
+  const handleClose = (event, reason) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setIsOpen(false)
+  }
+
+  return (
+    <div>
+      <Snackbar open={isOpen} autoHideDuration={6000} onClose={handleClose}>
+        <Alert
+          severity={severity}
+          variant='filled'
+          sx={{width: '100%'}}
+          onClose={handleClose}
+        >
+          {message}
+        </Alert>
+      </Snackbar>
+    </div>
+  )
+}
+
+AuthAlert.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  message: PropTypes.string.isRequired,
+  severity: PropTypes.string.isRequired
+}