728x90
1. github 소셜로그인 연동
1.1 Github 에서 세팅할 것
Settings → Developer settings → Oath Apps → New OAuth App → Register a new OAuth appication
- Authorization callback URL은 파이어베이스에서 로그인 제공업체에 깃허브를 추가할 때 받은 하단의 링크를 기입한다.
- Enable Device Flow 체크하기.
1.2 Firebase console 에서 세팅할 것
Authentication → Sign-in method → 새 제공업체 추가 → 사용 설정 토글 on
- 클라이언트 ID : 깃허브에서 확인
- 클라이언트 보안 비밀번호: 깃허브에서 확인
2. 메인 페이지 뷰 작업
2.1 Service Layout 코드 추가
서비스에서 계속 사용할 레이아웃.
import Head from 'next/head';
interface Props {
title: string;
children: React.ReactNode;
}
export const ServiceLayout = function ({
title = 'Frontend Tech Interview Prep',
children,
}: Props) {
return (
<div>
<Head>
<title>{title}</title>
</Head>
{children}
</div>
);
};
2.2 index.tsx 에서 import
import { ServiceLayout } from '@/components/service_layout';
import { NextPage } from 'next';
const IndexPage: NextPage = () => (
<ServiceLayout title="test">test</ServiceLayout>
);
export default IndexPage;
728x90
'개인프로젝트 > 프론트엔드 기술면접 아카이빙 웹앱' 카테고리의 다른 글
| 개인프로젝트 - 22.10.23 작업일지 (0) | 2022.10.23 |
|---|