この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
Supabaseは、firebaseの代替サービスと言われるBaasです。
今回は、SupabaseのOAuthプロバイダーの一つである、Slack認証をNext.jsプロジェクトで試してみました。
slack認証を有効にする
Supabaseにログイン
Supabaseでプロジェクトを作成します。
左サイドバーのSettingからAPIを選択し、「Configuration」のURLをコピーします。
slackでアプリを作成
api.slack.comにアクセスし、「Create an app」から新しくアプリを作成します。
「From scratch」を選択します。
アプリ名、ワークスペースを入力します。
今回はワークスペースを新規で作成しました。
「App Credentials」の項目から「Client ID」、「Client Secret」をコピーしておきます。
左サイドバーの「OAuth & Permissions」を選択し、「Redirect URLs」内の「Add New Redirect URL」を選択します。
SupabaseでコピーしたURLを追加して、保存します。
Supabaseに移動し、左サイドバーからAuthentication内のSettingsを選択します。 下にスクロールし、「Slack enable」をオンにして「Client ID」と「Secret ID」をそれぞれ貼り付けます。
貼り付けたら、「External OAuth Providers」の横にある「save」を、忘れずにクリックします。
Next.js側の実装
プロジェクトを作成します。
$ yarn create next-app --ts
$ cd <appName>Supabaseをインストールします。今回は、Supabase UIを使用します。
$ yarn add @supabase/supabase-js @supabase/ui.env.localファイルを作成し、キーとURLを環境変数に保存します。 キーとURLはsupabaseの「Settings」→「API」から確認することができます。
.env.local
NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY/libsフォルダを作成し、配下にsupabaseClient.tsファイルを作成します。
supabaseClient.tsを以下のように記述し、Clientを初期化します。
/libs/supabaseClient.ts
import { createClient } from "@supabase/supabase-js";
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
if (!supabaseUrl || !supabaseAnonKey) {
throw new Error("");
}
export const supabase = createClient(supabaseUrl, supabaseAnonKey);では認証画面を実装します。今回はsupabase UIを使用します。
index.tsxを変更します。
index.tsx
import Head from "next/head";
import { useEffect, useState } from "react";
import { supabase } from "../libs/supabaseClient";
import styles from "../styles/Home.module.css";
import { Auth, Button } from "@supabase/ui";
import { User } from "@supabase/supabase-js";
import { NextPage } from "next";
const Home: NextPage = () => {
const [user, setUser] = useState<User | null>();
useEffect(() => {
const user = supabase.auth.user();
setUser(user);
}, [user]);
const signOut = async () => {
supabase.auth.signOut();
setUser(null);
};
if (user) {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>supabase Auth</h1>
<p className={styles.description}>Your Id: {user.id}</p>
<Button onClick={() => signOut()} size={"large"}>SignOut</Button>
</main>
</div>
);
}
return (
<main className={styles.main} style={{ width: "500px", margin: "0 auto" }}>
<Auth.UserContextProvider supabaseClient={supabase}>
<Auth
supabaseClient={supabase}
providers={["slack"]}
socialColors={true}
/>
</Auth.UserContextProvider>
</main>
);
};
export default Home;開発環境を立ち上げ、ログインしてみます。
$ yarn dev
slack認証を使用して、ログインすることができました。
Supabase側でも、ユーザーがしっかり登録されています。
まとめ
今回は、Supabaseのslack認証を実装してみました。Supabaseには、他にもさまざまなOAuthプロバイダーがあります。また、現時点でテスト段階のようですが、データベースと繋ぎこめる「Triggers」機能もあるようなので、ぜひ使ってみたい思います。
ではまた。
12
