supabase authを使ったゲストログイン機能の実装

オリジナルアプリをデプロイ後に、supabase authの匿名ログイン機能を有効化してメールアドレスやパスワードを入力しないでアプリ内にログインできるゲストログイン機能を実装したので、オリジナルアプリを開発中の方の参考になれば幸いです！

1. 匿名ログインの有効化

下記にsupabaseのダッシュボードで匿名ログインを有効化する方法を示します。

1. supabaseのダッシュボードで作成中のアプリのプロジェクトを選択します。

2. supabaseのサイドバーで🔒アイコンのAuthenticationを選択

3. CONFIGURATIONのSign In / UpからUser SignupsのAllow anonymous sign-insをonにする

上記の手順でsupabaseのダッシュボードで行う設定は終了です。
supabase側の設定が終わったので、実際のコードを書いていきます。

2. signInAnonymously()で匿名ログインを実装

まずは実際のコードを示します。ディレクトリ構造や匿名ログインを実装しているコードは、私のオリジナルアプリで記載しているコードなので、ご自身の開発環境に合わせて変更してください。

supabaseの初期設定用ファイル(/app/_libs/supabase.ts)

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
);

匿名ログインを実装した箇所のコード(/app/(loginSignup)/signup/page.tsx)

'use client'
import { supabase } from '@/app/_libs/supabase'
import { useRouter } from 'next/navigation';

export default function Page () {
  const router = useRouter();
 
  const handleAnonymousLogin = async () => {
    const  { error } = await supabase.auth..signInAnonymously();

    //エラー時の処理
    if (error instanceof Error) {
      alert('ゲストログインに失敗しました。お手数ですが、再度お試し下さい。);
      throw new Error(error.message);
    }

    //エラーが発生しなかった場合、下記に指定したURLにリダイレクトさせる
    router.push('/users');
  }

  return (
    //フロンドエンドに表示するボタンの実装(tailwindcssでスタイルを当てていますがご自由にカスタマイズしてください)
    <button
      type='button'
      onClick={handleAnonymousLogin}
      className='w-full text-white bg-mainBlue hover:opacity-80 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-3 text-center relative'
    >
      ゲストログインはこちら
    </button>
  );
};

上記のコードについて簡単に解説します！
まず、supabaseの設定ファイルであるsupabase.tsですが、このファイルについてはカリキュラムでsupabaseを使用する時に設定したファイルと記述内容は変わりません。

次に、匿名ログインを実装したpage.tsxについてです。
こちらのコードで一番重要なのが、signInAnonymously()です！supabaseの匿名ログインを有効化して、supabase.auth.signInAnonymously();を実行するだけで匿名ログインを実装できます！
あとは、supabase.auth.signInAnonymously();を内包した関数をbuttonのonClick属性に指定すればボタンクリック時に匿名ログインを実行できます！

その他に記載したコードについて、簡単に解説します。必要なければ記事はここで終わりです。

・匿名ログインを実装したファイルについて
今回、signup/page.tsx(新規登録を行うページ)に匿名ログインを追加実装しました。ですが、匿名ログインをどこに実装するかは人によって違うと思いますので、実装したい箇所でsupabase.auth.signInAnonymouly()を実行していただければと思います！

・匿名ログイン後のリダイレクト先について
記載したコードではnext/navigationのuseRouterを使ってrouter.push(‘/users’)で/users(ログインユーザーのマイページ)にリダイレクトさせていますが、こちらもリダイレクト先は人によって違うと思いますので、変更してください。
1つ注意点として、リダイレクト先で登録済のユーザー情報が必要になる場合、匿名ログインでログインするとエラーが発生する可能性があります。実際に私のアプリでは、登録したユーザーのsession.user.idを使用してsupabaseのusersテーブルに保存されたログインユーザーの情報を取得して表示するというロジックを実装していてエラーが発生しました。
私の場合は、匿名ログインでログインするとsession.user.is_anonymousがtrueになるのでこれを使ってif文でsession.user.is_anonymousがtrue(匿名ログイン)なのかfalse(ログインユーザー)なのかで実行する処理を分岐することで解決しました。
それぞれ実装しているロジックによって、エラーが発生したりしなかったりすると思いますが、発生した場合の参考になれば幸いです。

最後に

supabaseを使った匿名ログインの実装方法についての記事は以上になります！
転職活動の際に採用担当の方が簡単にアプリを確認できたり、他の受講生の方が自分のアプリ作りの参考にアプリを覗いてみたり、新規ユーザー様が気軽にアプリを使用できるようにしたりとメリットはたくさんあると感じています！
やることはあまり多くなく、簡単に実装できるのぜひ実装してみてください！

最後まで読んでくださり、ありがとうございます！