Serverpod Authentication の行間を読む〜遷移

上級者の説明からこぼれ落ちる細部

身の程知らずな挑戦を続ける独学者にとって大変なのは、
説明の内容が難しいのではなく、
説明してくれていないところがわからない、ということだ。
Full Stack Dartを目指すServerpod、
Serverpod自体の説明は丁寧なので、がんばればついて行ける。
けれども、これ使うほどのエンジニアなら当然知ってるでしょ、ということは説明してくれない。
それで立ち往生する。

どこにもいけない

SeverpodのAuthenticationはなかなか親切で、
（他は知らないので、特別なわけではないかもしれないが）
いろんな機能（詳しくはわからない）がセットになったmoduleを入れさえすれば
様々なことをよしなに取り計らってくれる、らしい。
E-mailやGoogleでのログインボタンなんかも、もれなくついてくる。

例えばSignInWithEmailButton()をクリックすると
入力画面が開いて、いろいろ入力すればsignUp完了、DBにちゃんとuserとして登録される。
おお、簡単。
ところが、そこから、うんともすんとも動かない。
user感覚が抜けないので、signUpしたら次に進めよ、と思ってしまうが、進まない。

えーいと思ってやり直すと、
「もうsignInしてますね」という感じでいきなりAccountPageに入る、
のだが、ここからもどこへも行けない。
ここにはsignOutというButtonがあるので、それを押すと、
terminalではサインアウトしたと表示されるけど、これもどこへも行かない。

考えてみたら当たり前のことで、
ここから先は、それぞれのアプリで挙動が違うだろう。
どこへ行くかは勝手に決めてよね、ということだ。
ここまでが親切すぎたので、油断した･･･。

まずはsignUp signInしたときの遷移。

                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SignInWithEmailButton(
                      caller: client.modules.auth,
		      
		      ///ここから先がtutorialにはなかったので追加。
                      onSignedIn: () { 
                        Navigator.push<String>(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const AccountPage(),
                          ),
                        );
                      },
                    ),
                  ),

つぎはsignOutしたときの遷移

              Padding(
                padding: const EdgeInsets.all(16),
                child: ElevatedButton(
                  onPressed: () {
                    sessionManager.signOut();
		    
		    ///ここから先がtutorialになかったので追加。
                    Navigator.push<String>(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const SignInPage(),
                      ),
                    );
                  },
                  child: const Text('Sign out'),
                ),
              ),

signInしたまま先に進むには

FloatingActionButtonをつけました。ふつうのButtonでもいいかもね。

ちなみにAccountPageで遭遇したもう一つの問題

tutorialで、
AccountPageというfileをつくって、これを貼り付けてね、
といわれるコードを貼り付けると、
「いきなりListViewとかいうな！」と怒られます。
tutorialのcodeはこんな感じ

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

import 'package:my_project_flutter/src/serverpod_client.dart';

class AccountPage extends StatelessWidget {
  const AccountPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          contentPadding:
              const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
          leading: CircularUserImage(
            userInfo: sessionManager.signedInUser,
            size: 42,
          ),
          title: Text(sessionManager.signedInUser!.userName),
          subtitle: Text(sessionManager.signedInUser!.email ?? ''),
        ),
        Padding(
          padding: const EdgeInsets.all(16),
          child: ElevatedButton(
            onPressed: () {
              sessionManager.signOut();
            },
            child: const Text('Sign out'),
          ),
        ),
      ],
    );
  }
}

ListViewをScaffoldでwrapしたら動きました。

知らないって、悲しい。

でも、一つ一つわかっていくのは楽しいです。
今回はこの記事にそって挑戦中。
clearしたら、またご報告します。
https://medium.com/serverpod/getting-started-with-serverpod-authentication-part-1-72c25280e6e9