前のページはこちら

Flutter側の下準備

前回で、supabaseを使う下準備が出来ました。最初はユーザー認証（ユーザー登録、ログイン、ログアウト処理）をやりたいと思いますが、その準備をここで行います。

（テスト時推奨）メール認証をOFFにする

supabaseの基本は、ユーザー登録後メール認証を行う事でログインが出来る設定になっていますが、テストの時はこの設定が意外とネックになったりします。

これを停止するには、supabaseのコンソールからAuthenticationアイコン -> Settings -> Enable email confirmations をOFFにします。これを行う事で、メール認証をしないアカウントでもログイン出来るようになります。（テスト用のアカウントの作成が容易になります）

Authテスト用のコードの準備

supabase_repository.dartの準備

supabase_repository.dartを作り、下記をコピペしてください。今後はここに追記していきます。

import 'package:supabase_flutter/supabase_flutter.dart';

class SupabaseRepository {
  static var AuthuserId = Supabase.instance.client.auth.currentUser;

  //ユーザー登録
  static Future<bool> SignUp({email, pass}) async {
    return true;
  }

  //ログイン処理
  static Future<bool> LogIn({email, pass}) async {
    return true;
  }

  //ログアウト
  static Future<bool> LogOut() async {
    return true;
  }
}

auth_page_view.dartの準備

テスト用の外観も準備しましたので、auth_page_view.dartを作りこれをコピペしてください。

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'supabase_repository.dart';

class AuthPageView extends StatefulWidget {
  const AuthPageView({Key? key}) : super(key: key);

  @override
  _AuthPageViewState createState() => _AuthPageViewState();
}

class _AuthPageViewState extends State<AuthPageView> {
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passController = TextEditingController();

  //Supabase.instance.client.auth.currentUser!.email;
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 12),
      children: [
        const SizedBox(height: 18),
        Text('${Supabase.instance.client.auth.currentUser?.email}'),
        const SizedBox(height: 18),
        TextFormField(
          controller: _emailController,
          decoration: const InputDecoration(labelText: 'Email'),
        ),
        TextFormField(
          controller: _passController,
          decoration: const InputDecoration(labelText: 'Pass'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.LogIn(
              email: _emailController.text,
              pass: _passController.text,
            );
            print('ログイン終了');
            setState(() {});
          },
          child: Text('ログイン'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.SignUp(
              email: _emailController.text,
              pass: _passController.text,
            );
            print('アカウント作成終了');
          },
          child: Text('アカウント作成'),
        ),
        const SizedBox(height: 18),
        ElevatedButton(
          onPressed: () async {
            var _res = await SupabaseRepository.LogOut();
            print('ログアウト');
            setState(() {});
          },
          child: Text('ログアウト'),
        ),
      ],
    );
  }
}

main.dartの書き換え

main.dartを下のように書き換えます。

「url」と「anonKey」は自分のAPIURLとAPIキーを入れます。

自分のAPIURLと自分のAPIキーの確認方法はこちらです　→　APIキーとAPIURL(ソースコードをgitにアップする方は要注意の部分も必ず読んでください)

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

import 'auth_page_view.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    ！！確認：gitにアップする方は、これらの情報がgitにアップされない形に必ずしてください。
    url: あなたのAPIURLを''で囲った文字列として入力します,
    anonKey:
        あなたのAPIキーを''で囲った文字列として入力します,
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('flutterとsupabase')),
        body: AuthPageView(),
      ),
    );
  }
}

実行

このような画面になります。

次のページはこちら

【Auth編】ユーザー登録・ログイン・ログアウト実装