File size: 2,666 Bytes
babeaf6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
 * src/components/Auth/SignIn.jsx
 * signin and signup with google account
 * 
 * created by Lynchee on 7/20/23
 */

import React, { useState } from 'react';
import auth from '../../utils/firebase';
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import './styles.css';

export const sendTokenToServer = async (token) => {
  // Send token to server
  const scheme = window.location.protocol;
  var currentHost = window.location.host;
  var parts = currentHost.split(':');
  var ipAddress = parts[0];
  var newPort = '8000';
  var newHost = ipAddress + ':' + newPort;
  const url = scheme + '//' + newHost;

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${token}`
      }
    });

    if (!response.ok) {
      console.error("Sent token failed");
    }
  } catch (error) {
    console.error("Sent token failed. ", error);
  }
}

export const signInWithGoogle = async (isLoggedIn, setToken) => {
  const provider = new GoogleAuthProvider();
  return signInWithPopup(auth, provider) // Return the promise here
    .then(async (result) => {
      // This gives you a Google Access Token. You can use it to access the Google API.
      const credential = GoogleAuthProvider.credentialFromResult(result);
      const token = await auth.currentUser.getIdToken();

      // The signed-in user info.
      const user = result.user;
      isLoggedIn.current = true;
      setToken(token);
      await sendTokenToServer(token);

      console.log("Sign-in successfully");
    }).catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      console.error(`Error occurred during sign in. Code: ${errorCode}, Message: ${errorMessage}`);
      // The email of the user's account used.
      const email = error.customData.email;
      // The AuthCredential type that was used.
      const credential = GoogleAuthProvider.credentialFromError(error);
      isLoggedIn.current = false;
    });
}

const SignIn = ({ isLoggedIn, setToken }) => {
  const [isLoading, setIsLoading] = useState(false);

  const signIn = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      await signInWithGoogle(isLoggedIn, setToken);
    } catch (error) {
      console.error('Error during sign in:', error);
    }
    setIsLoading(false);
  }

  return (
    <form onSubmit={signIn}>
      <button type="submit" disabled={isLoading} className="auth-btn" >
        {isLoading ? "Signing In..." : "Sign in"}
      </button>
    </form>
  )
}

export default SignIn;