내일배움캠프 최종 프로젝트 - 로그인과 회원가입 (6) github로그인

GitHub 로그인 구현 순서

1. 세션 지속성 설정

• 'setPersistence(auth, browserSessionPersistence)'를 호출하여 사용자 세션의 지속성 설정

await setPersistence(auth, browserSessionPersistence);

]
2. GitHub 인증 공급자 생성

• 'new GithubAuthProvider()'를 호출하여 GitHub 인증 공급자 객체를 생성합니다.

const provider = new GithubAuthProvider();

3. GitHub 로그인 팝업 요청

• 'signInWithPopup(auth, provider)'를 호출하여 사용자가 GitHub 계정으로 로그인할 수 있는 팝업 창을 띄움

const result = await signInWithPopup(auth, provider);

4. 사용자 정보 처리

• 로그인이 성공하면, 'result.user'에서 사용자 정보를 가져옴
• 이메일이 없는 경우, 'user.email || '${user.uid}@no-email.com''을 사용하여 대체 이메일 생성

      // Firestore에 저장할 사용자 정보
      const userData = {
        nickname: user.displayName || email.split('@')[0], // GitHub username 또는 이메일을 사용
        email: replaceEmail,
        //생년월일은 초기에 빈 값으로 설정
        birthdate: '',
      };

5. Firestore에 사용자 정보 저장

• 사용자 정보를 Firestore에 저장하기 위해 'setDoc(doc(db, 'users', user.uid), userData)'호출
• 'userData'는 사용자의 닉네임, 이메일, 생년월일(초기에 빈 값으로 설정)을 포함

   // 사용자 정보 저장
      await setDoc(doc(db, 'users', user.uid), userData);

6. 결과 처리

• 성공 시 사용자에게 'GitHub 로그인 성공!'이라는 알림을 표시
• 오류 발생 시 콘솔에 오류를 기록하고 사용자에게 실패 메시지를 표시

      alert('GitHub 로그인 성공!');
    } catch (error) {
      console.error('GitHub 로그인 실패:', error);
    }

오늘의 한줄평 : 헌신하면 헌신짝 된다. 그말이 진짜 겪을줄이야, 컨디션도 안좋고 그런데도 노력하는데 어이가 없다.