Phone auth

package.json

@@ -12,6 +12,7 @@
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
     "react-google-button": "^0.7.2",
+    "react-phone-number-input": "^3.1.44",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/App.css

@@ -1,3 +1,7 @@
+a {
+  text-decoration: none;
+}
+
 body {
   background-color: #fafafa;
   display: flex;
@@ -24,3 +28,11 @@ body {
   width: 40px !important;
   height: 38px !important;
 }
+.button-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#recaptcha-container {
+  margin: 20px;
+}

src/App.js

@@ -4,6 +4,7 @@ import "./App.css";
 import Home from "./components/Home";
 import Login from "./components/Login";
 import Signup from "./components/Signup";
+import PhoneSignUp from "./components/PhoneSignUp";
 import ProtectedRoute from "./components/ProtectedRoute";
 import { UserAuthContextProvider } from "./context/UserAuthContext";
 
@@ -24,6 +25,7 @@ function App() {
               />
               <Route path="/" element={<Login />} />
               <Route path="/signup" element={<Signup />} />
+              <Route path="/phonesignup" element={<PhoneSignUp />} />
             </Routes>
           </UserAuthContextProvider>
         </Col>

src/components/Login.js

@@ -69,6 +69,13 @@ const Login = () => {
             onClick={handleGoogleSignIn}
           />
         </div>
+        <Link to="/phonesignup">
+          <div className="d-grid gap-2 mt-3">
+            <Button variant="success" type="Submit">
+              Sign in with Phone
+            </Button>
+          </div>
+        </Link>
       </div>
       <div className="p-4 box mt-3 text-center">
         Don't have an account? <Link to="/signup">Sign up</Link>

src/components/PhoneSignUp.js

@@ -0,0 +1,94 @@
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { Form, Alert } from "react-bootstrap";
+import { Button } from "react-bootstrap";
+import "react-phone-number-input/style.css";
+import PhoneInput from "react-phone-number-input";
+import { useUserAuth } from "../context/UserAuthContext";
+
+const PhoneSignUp = () => {
+  const [error, setError] = useState("");
+  const [number, setNumber] = useState("");
+  const [flag, setFlag] = useState(false);
+  const [otp, setOtp] = useState("");
+  const [result, setResult] = useState("");
+  const { setUpRecaptha } = useUserAuth();
+  const navigate = useNavigate();
+
+  const getOtp = async (e) => {
+    e.preventDefault();
+    console.log(number);
+    setError("");
+    if (number === "" || number === undefined)
+      return setError("Please enter a valid phone number!");
+    try {
+      const response = await setUpRecaptha(number);
+      setResult(response);
+      setFlag(true);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const verifyOtp = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (otp === "" || otp === null) return;
+    try {
+      await result.confirm(otp);
+      navigate("/home");
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <>
+      <div className="p-4 box">
+        <h2 className="mb-3">Firebase Phone Auth</h2>
+        {error && <Alert variant="danger">{error}</Alert>}
+        <Form onSubmit={getOtp} style={{ display: !flag ? "block" : "none" }}>
+          <Form.Group className="mb-3" controlId="formBasicEmail">
+            <PhoneInput
+              defaultCountry="IN"
+              value={number}
+              onChange={setNumber}
+              placeholder="Enter Phone Number"
+            />
+            <div id="recaptcha-container"></div>
+          </Form.Group>
+          <div className="button-right">
+            <Link to="/">
+              <Button variant="secondary">Cancel</Button>
+            </Link>
+            &nbsp;
+            <Button type="submit" variant="primary">
+              Send Otp
+            </Button>
+          </div>
+        </Form>
+
+        <Form onSubmit={verifyOtp} style={{ display: flag ? "block" : "none" }}>
+          <Form.Group className="mb-3" controlId="formBasicOtp">
+            <Form.Control
+              type="otp"
+              placeholder="Enter OTP"
+              onChange={(e) => setOtp(e.target.value)}
+            />
+          </Form.Group>
+          <div className="button-right">
+            <Link to="/">
+              <Button variant="secondary">Cancel</Button>
+            </Link>
+            &nbsp;
+            <Button type="submit" variant="primary">
+              Verify
+            </Button>
+          </div>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default PhoneSignUp;

src/components/ProtectedRoute.js

@@ -3,8 +3,6 @@ import { Navigate } from "react-router-dom";
 import { useUserAuth } from "../context/UserAuthContext";
 const ProtectedRoute = ({ children }) => {
   const { user } = useUserAuth();
-
-  console.log("Check user in Private: ", user);
   if (!user) {
     return <Navigate to="/" />;
   }

src/context/UserAuthContext.js

@@ -6,6 +6,8 @@ import {
   signOut,
   GoogleAuthProvider,
   signInWithPopup,
+  RecaptchaVerifier,
+  signInWithPhoneNumber,
 } from "firebase/auth";
 import { auth } from "../firebase";
 
@@ -28,6 +30,16 @@ export function UserAuthContextProvider({ children }) {
     return signInWithPopup(auth, googleAuthProvider);
   }
 
+  function setUpRecaptha(number) {
+    const recaptchaVerifier = new RecaptchaVerifier(
+      "recaptcha-container",
+      {},
+      auth
+    );
+    recaptchaVerifier.render();
+    return signInWithPhoneNumber(auth, number, recaptchaVerifier);
+  }
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
       console.log("Auth", currentuser);
@@ -41,7 +53,14 @@ export function UserAuthContextProvider({ children }) {
 
   return (
     <userAuthContext.Provider
-      value={{ user, logIn, signUp, logOut, googleSignIn }}
+      value={{
+        user,
+        logIn,
+        signUp,
+        logOut,
+        googleSignIn,
+        setUpRecaptha,
+      }}
     >
       {children}
     </userAuthContext.Provider>