From c3b6f596eb6995709ef08c179d1836666b6295ac Mon Sep 17 00:00:00 2001
From: adhamhaddad <adhamhaddad.dev@gmail.com>
Date: Wed, 26 Apr 2023 13:44:02 +0200
Subject: [PATCH] added frontend code to help with integration

---
 documents/react.js | 67 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 documents/react.js

diff --git a/documents/react.js b/documents/react.js
new file mode 100644
index 0000000..f929e3e
--- /dev/null
+++ b/documents/react.js
@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+
+const Login = () => {
+  const [accessToken, setAccessToken] = useState(null);
+  const [refreshToken, setRefreshToken] = useState(null);
+  const [values, setValues] = useState({
+    email: '',
+    password: ''
+  });
+  const handleChange = (prop) => (event) => {
+    setValues((prev) => ({ ...prev, [prop]: event.target.value }));
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+
+    const response = await fetch('/auth/login', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ email, password })
+    });
+
+    const data = await response.json();
+
+    if (response.ok) {
+      // The login was successful, extract the access token from the response
+      const { accessToken } = data;
+
+      // Retrieve the refresh token from the HTTP-only cookie
+      const cookies = document.cookie.split('; ');
+      const refreshTokenCookie = cookies.find((cookie) =>
+        cookie.startsWith('refreshToken=')
+      );
+      const refreshToken = refreshTokenCookie
+        ? refreshTokenCookie.split('=')[1]
+        : null;
+
+      // Store the access token and refresh token in state
+      setAccessToken(accessToken);
+      setRefreshToken(refreshToken);
+    } else {
+      // The login failed, display the error message
+      setError(data.message);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type='email'
+        name='email'
+        value={values.email}
+        onChange={handleChange('email')}
+      />
+      <input
+        type='password'
+        name='password'
+        value={values.password}
+        onChange={handleChange('password')}
+      />
+      <button type='submit'>Login</button>
+    </form>
+  );
+};
+
+export default Login;