NextJS + Supabase 채팅 앱 만들기 - 2. Supabase 기본설정 + Github Oauth 로그인 1

https://supabase.com/

Supabase | The Open Source Firebase Alternative

supabase 홈페이지에서 new project를 만들어준다.

 

 

이제 docs로 가서, authentication을 어떻게 설정해주면 좋을지를 본다.

https://supabase.com/docs/guides/auth/server-side/nextjs

Setting up Server-Side Auth for Next.js | Supabase Docs

여기로 가면 nextjs authentication설정을 어떻게하나 볼 수 있다.

 

먼저 패키지를 인스톨해준다.

npm install @supabase/supabase-js @supabase/ssr

 

그리고 env 파일을 만들어준다. 

우선 .env.local 이라는 이름으로 루트디렉토리에 만들어줬다.

 

그리고 문서에서 하라는 데로

NEXT_PUBLIC_SUPABASE_URL=<your_supabase_project_url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_supabase_anon_key>

를 env에 넣어주고, 여기에 자신의 supabase url과 anon key를 넣어야 한다.

 

이건 처음만들었던 프로젝트 페이지로 가서, project setting -> api 에 가면 볼 수 있다. 복사해서

<your_supabase_project_url>과 <your_supabase_anon_key>에 붙여넣어주자.

 

 

로그인을 할 수 있도록 설정을 계속 할거다.

https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=environment&environment=client

Creating a Supabase client for SSR | Supabase Docs

여기 들어가서  내려보면, 

client side, server side, middle ware 설정을 해주는 부분이 있다. 유튜브 동영상과는 조금 다르지만, 공식 홈페이지의 내용을 따르도록 한다.

각각의 버튼을 클릭해, 해당 위치에 파일을 만들고, 내용을 복사해서 붙여넣어준다.

예시 ) utils/supabase/client.tsx 라는 파일을 만들고, 안의 내용을 복사해 붙여넣어준다. Server-side, Middleware도 마찬가지. Middleware는 만들어야 될 파일이 두개이므로 만들어야할 위치도 잘 보고, 빼먹지않고 내용도 넣어준다.

 

위 설정들은 쿠키처리에 관한 설정들인데, 자세한 내용은 글들을 읽어보면 된다.

 

 

이제 다시 supabase project setting page로 가서, Authentications -> Providers 에 가면, 다양한 OAuth Provider들이 보이는데, 여기서는 간단한 Github을 사용하기로 했다. enabled를 켜주고, ClientId와 Secret을 얻기위해 깃헙으로 이동해준다.

 

 

https://github.com/settings/profile

GitHub: Let’s build from here

깃헙 -> 세팅 -> 왼쪽 맨 밑에 보면 Developer setting이 있다.

여기로 들어가서 OAuth App -> New OAuth App 을 클릭하여 새롭게 생성을 해주는데,

여기서 Homepage URL은 아직 없으므로, http://localhost:3000으로 해주고, (나중에 배포하면 그때 알맞게 바꿔주면 된다.)

Authorization callback URL은 방금 supabase 페이지에서 Callback URL (for OAuth) 을 복사해서 넣어주면 된다. 위 스크린샷에서 제일 밑부분.

 

이제 레지스터 버튼을 눌러 등록해주고 나면, Client ID를 보여주고, Client Secret을 만드는 페이지가 나타난다. Client Secret은 아마 한번밖에 못보는 걸로 알고있으니, 만들고 혹시 보관이 필요하다면 지금 복사해서 잘 놔둔다.

 

클라이언트 아이디와 시크릿을 복사해서 supabase 페이지에 잘 붙여넣어준다.

 

https://supabase.com/docs/guides/auth/server-side/nextjs

Setting up Server-Side Auth for Next.js | Supabase Docs

 

여기로 가면 OAuth로그인을 어떻게 만드는지 나와있다.

middleware 만드는 거까지는 위에서 했으니 넘어가주고, 

로그인 페이지 만드는 것도 다른방식으로 할거니 넘어가준다.

6번을 보면, 인증메일 url을 바꾸라고 나와있는데, 링크를 클릭해들어가서 바꾸라는데로 바꿔준다.

 들어가면 인증메일 템플릿이 있는데 그부분을 바꿔준다.

여기말고도 바꿔주고 싶은데가 있으면 자기 입맛에 맞게 문구를 수정해준다.

 

이제 https://supabase.com/docs/guides/auth/social-login

Social Login | Supabase Docs

여기서 github login을 할거니깐 github을 클릭해서 들어가준뒤 보면, 대부분은 위에서 해준것들이긴 한데,

Create a new file at app/auth/callback/route.ts  and populate with the following: 이부분은 안해줬다.

하라는대로 app/auth/callback/route.ts 파일을 만들고, 파일안의 내용을 복사해서 붙여넣어준다.

 

이제 supabase project의 Authentication => URL Configuration으로 가서, Site URL과 Redirect URL을 설정해준다.

OAuth사이트에서 supabase로 리다이렉트하면서 인증을 하고, 인증이 되면 다시 우리의 사이트로 리다이렉트시켜준다.

여기서 신기한 걸 발견했는데, 저기 보이는 Redirect URLs에 지금 localhost와 배포된 사이트 주소가 들어가있는 걸 볼 수 있는데, 저렇게 등록해놓으면 localhost에서 로그인 했을 때는 localhost로, 배포된 주소에서 접속했을때는 배포된 주소로 redirect시켜준다.

 

 

 

이제 로그인을 만들어주자.

 

Component 디렉토리에 ChatHeader.tsx 파일을 만들어준다.

그 안의 내용

"use client";

import React from "react";
import { Button } from "./ui/button";

const ChatHeader = () => {
  return (
    <div className="h-20">
      <div className="p-5 border-b flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold">Daily Chat</h1>
          <div className="flex items-center gap-1">
            <div className="h-4 w-4 bg-green-500 rounded-full animate-pulse"></div>
            <h1 className="text-sm text-gray-400">2 Online</h1>
          </div>
        </div>
        <Button>Login</Button>
      </div>
    </div>
  );
};

export default ChatHeader;

 

app/page.tsx 내용 변경

import ChatHeader from "@/components/ChatHeader";
import { Button } from "@/components/ui/button";
import React from "react";

const page = () => {
  return (
    <div className="max-w-3xl mx-auto md:py-10 h-screen">
      <div className="h-full border rounded-md">
        <ChatHeader />
      </div>
    </div>
  );
};

export default page;

 

여기까지하고 페이지를 확인하러 들어가보면

이렇게 404 Not found 페이지가 떠있을 가능성이 높은데, 그 이유는 아까 supabase docs에서 복사한 utils/supabase/middleware.ts 파일을 살펴보면

if (
    !user &&
    !request.nextUrl.pathname.startsWith("/login") &&
    !request.nextUrl.pathname.startsWith("/auth")
  ) {
    // no user, potentially respond by redirecting the user to the login page
    const url = request.nextUrl.clone();
    url.pathname = "/login";
    return NextResponse.redirect(url);
  }

이렇게 유저가 없을 때, 로그인 페이지로 redirect 시켜버리는 부분이 있는 걸 발견할 수 있다. 

우선은 이부분을 주석처리해준다.

그리고 

http://localhost:3000/

로 접속해보면, 이제 리다이렉트 되지않고 잘 들어가지는 걸 볼 수 있다.

 

이제 로그인 기능을 만들어주자.

ChatHeader.tsx로 들어가서 handleLoginWithGithub 펑션을 만들고, Button에 onClick이벤트로 연결해준다.

"use client";

import React from "react";
import { Button } from "./ui/button";
import { createClient } from "@/utils/supabase/client";	// supabase의 객체. supabase와 연결해주는 ORM같은거라고 생각하면 편하다.
// 여기서 주의해야할 게, client componet 이므로 client에서 임포트 해와야 한다는 것이다.

const ChatHeader = () => {
  const handleLoginWithGithub = () => {
    const supabase = createClient();	// supabase 객체 생성
    supabase.auth.signInWithOAuth({
      provider: "github",
      options: {
        redirectTo: location.origin + "/auth/callback",
      },
    });
  };

  return (
    <div className="h-20">
      <div className="p-5 border-b flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold">Daily Chat</h1>
          <div className="flex items-center gap-1">
            <div className="h-4 w-4 bg-green-500 rounded-full animate-pulse"></div>
            <h1 className="text-sm text-gray-400">2 Online</h1>
          </div>
        </div>
        <Button onClick={handleLoginWithGithub}>Login</Button>	// button에 이벤트를 달아준다.
      </div>
    </div>
  );
};

export default ChatHeader;

 

 

이제 로그인 버튼을 눌러보면 

 

이렇게 깃헙 로그인 인증부분이 나온다. 계속해서 진행해보면  첫 화면으로 리다이렉트 되는 걸 볼 수있다.

 

로그인이 된건데, 아직까지 로그인에 대한 처리를 아무것도 해주지 않아서 차이는 보이지 않을 수 있다.

하지만 supabase 프로젝트로 들어가 Authentication => Users 항목을 보면 새로운 유저가 추가되어 있는 걸 볼 수 있다.

OAuth 인증이 정상적으로 됬다는 뜻이다.

 

 

추가된 이 유저를 Authentication에 있는 테이블이 아니라, 좀 더 관리하기 쉬운 테이블로 가져와서 이름, 닉네임등을 추가해줘야 하는데, 우선은 여기까지 만들고 다음에 이어서 하도록하겠다.

바로 이어서 유저를 옮기는 게 아니라, 로그인이 되었다면 로그아웃을 보여주고 이런거 처리를 몇개 하고난 후에 유저테이블 만들고 자동으로 옮기고 이런걸 할 것이다. 

 

 

---

https://www.youtube.com/watch?v=-xXASlyU0Ck

 

를 보며 실습하며 적는 글.

 

이번편에서는 동영상과 차이가 나는 부분이 꽤 있다. 공식문서도 그렇고, 6개월사이에 꽤 많은것이 바꼈나보다.

 

그나저나 블로그 글 작성하는 데 생각보다 시간이 굉장히 오래걸린다. 블로그 작성하시는 분들 정말 대단하다. 

아주 조금이긴 하지만 중간에 내용이 한번 날아가서 화가 조금 났었다.

 

github

https://github.com/Wunhyeon/Next-Supabase-Chat/tree/2.login-1

GitHub - Wunhyeon/Next-Supabase-Chat