TIL-24.05.20

 

 

 

 

 

이메일계정 연동 회원가입 기능

import React, { useState } from 'react';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

function EmailLogin() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async () => {
    try {
      const auth = getAuth();
      await signInWithEmailAndPassword(auth, email, password);
      // 로그인 성공 시 다음 작업 수행
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <input type="email" value={email} 
      onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" value={password} 
      onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
      <button onClick={handleLogin}>Log In</button>
      {error && <p>{error}</p>}
    </div>
  );
}

export default EmailLogin;

 

 

 

 

 

깃허브계정 연동 회원가입 기능

import React from 'react';
import firebase from 'firebase/app';
import 'firebase/auth';

function GitHubLogin() {
  const handleGitHubLogin = async () => {
    const provider = new firebase.auth.GithubAuthProvider();
    try {
      await firebase.auth().signInWithPopup(provider);
      // 로그인 성공 시 다음 작업 수행
    } catch (error) {
      console.error(error.message);
    }
  };

  return (
    <div>
      <button onClick={handleGitHubLogin}>Log In with GitHub</button>
    </div>
  );
}

export default GitHubLogin;

 

 

 

 

 

비밀번호 리셋 이메일 전송 기능

import React, { useState } from 'react';
import { getAuth, sendPasswordResetEmail } from 'firebase/auth';

function PasswordResetEmail() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');
  const [message, setMessage] = useState('');

  const handleSendEmail = async () => {
    try {
      const auth = getAuth();
      await sendPasswordResetEmail(auth, email);
      setMessage('Password reset email sent! Please check your inbox.');
    } catch (error) {
      setError(error.message);
    }
  };

  return (
    <div>
      <input type="email" value={email} 
      onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <button onClick={handleSendEmail}>Send Password Reset Email</button>
      {error && <p>{error}</p>}
      {message && <p>{message}</p>}
    </div>
  );
}

export default PasswordResetEmail;