【Flutter x Supabase】 ログアウトやり方＋おまけつき

![スクリーンショット 2023-11-30 17.16.14（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/76c06dd0-81e2-7386-00df-5c71d7d73a67.png)


:::note info
この記事は、<b>株式会社ゆめみの23卒 Advent Calendar 2023</b>のアドベントカレンダーになります！！
色々な種類の記事が投稿されるので、お楽しみに🤗
:::

https://qiita.com/advent-calendar/2023/yumemi-23-graduation

こんにちは。いせりゅーです。今回は、Flutter x Supabaseでログアウトやり方に加えて、必要そうな記載を書いてみました。(あくまでも一例です)

:::note warn
Supabaseを学習し始めてからまもないため、間違えた実装を記載するかも知れません。その場合はコメントなどで教えていただけると幸いです🙇
:::



１、ログアウトしてもいいか確認する
２、ログアウトする
３、ログイン画面に遷移をする

こんな感じで進めていきます〜〜！！

# ログアウトしてもいいか確認する
ログアウトの確認方法は、いろいろやり方があるかも知れませんが、今回はダイアログを出すことにしました。

```dart
 void openLogOutDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('ログアウト'),
          content: Text('ログアウトしますか?'),
          actions: <Widget>[
            CupertinoDialogAction(
              child: Text(
                'キャンセル',
                style: TextStyle(color: Colors.blueAccent),
              ),
              isDestructiveAction: true,
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              child: Text(
                'ログアウト',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () {
                logout();
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  void logout() {
   // ログアウトの処理を書く
  }
 
```
# ログアウトする

ログアウトする処理はシンプルに記載をすることができます。

```dart
final supabase = Supabase.instance.client;

Future<void> logout() async {
  await supabase.auth.signOut();
}
```
# ログイン画面に遷移をする

今回は、ログアウトした後にログイン画面に遷移する処理を記載してみました。
また、`push`だと前の画面に戻れてしまうため、`pushReplacement`を使用します。

```dart
Navigator.pushReplacement(
  context,
  MaterialPageRoute( 
    builder: (context) => LoginPage(),
  ),
);
```
# ソースコード

```dart

final supabase = Supabase.instance.client;

  void openLogOutDialog() {
    showDialog(
      context: context,
      builder: (context) {
        return CupertinoAlertDialog(
          title: Text('ログアウト'),
          content: Text('ログアウトしますか?'),
          actions: <Widget>[
            CupertinoDialogAction(
              child: Text(
                'キャンセル',
                style: TextStyle(color: Colors.blueAccent),
              ),
              isDestructiveAction: true,
              onPressed: () => Navigator.pop(context),
            ),
            CupertinoDialogAction(
              child: Text(
                'ログアウト',
                style: TextStyle(color: Colors.red),
              ),
              onPressed: () {
                logout();
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }

  Future<void> logout() async {
    await supabase.auth.signOut();
    await Navigator.pushReplacement(
      context,
      MaterialPageRoute( 
        builder: (context) => LoginPage(),
      ),
    );
  }

```

# 最後に

自分もまだまだ学習中ですが、Supabaseのいいところが毎日見つかってきてとてもいいですね。個人的にはこれからの発展に期待したいですね😁


# ちょっとした宣伝

株式会社ゆめみの23卒のメンバーでアドベントカレンダーを作成しています。
新卒のフレッシュな記事がたくさん投稿予定なので、少しでも興味があれば購読いただけると幸いです！！


https://qiita.com/advent-calendar/2023/yumemi-23-graduation



<img width="1240" height="112" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023">