flutterでfirebaseを使いチャットアプリを作る（auth編）

この記事は [GameWith Advent Calendar 2018](https://qiita.com/advent-calendar/2018/gamewith) の12日目です
flutterがこの度1.0になりましたので、firebaseでチャットアプリを作ってみようと思います。
今回はauth編です。iOSのみ実装していきます。

## flutterのセットアップ
flutterのセットアップは公式を参考に設定していけば特に詰まることもなくできると思いますので割愛します。
https://flutter.io/docs/get-started/install

## flutterでfirebaseを使えるようにする
flutterでfirebaseを使えるようにするためにの準備をします。
firebaseの公式にドキュメントがありますのでそれを参考にセットアップしていきます。
こちらも公式通りにやれば特に詰まることはないと思います。
https://firebase.google.com/docs/flutter/setup?hl=ja


## 認証機能の実装
今回はgoogle認証を使用しますので以下のパッケージを`pubspec.yaml`に追加します


```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^0.6.6
  google_sign_in: ^3.2.4
```


次に[こちら](https://pub.dartlang.org/packages/google_sign_in)の`iOS integration`の項目に記載されている内容をやっておきます

`[project]/ios/Runner/Info.plist`　に以下を追加します。

```
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			// こちらに GoogleService-Info.plist の REVERSED_CLIENT_ID を反映します
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>
```

Firebaseにアプリの登録ができれいれば`GoogleService-Info.plist`があると思いますので、`<string>`に`GoogleService-Info.plist`に記載されている`REVERSED_CLIENT_ID`を反映してます。

最後に[こちら](https://pub.dartlang.org/packages/firebase_auth)を参考に実際に`main.dart`に認証用のコードを追加していきます。

反映したものがこちらになります。

```dart:main.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter × firebase Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter × firebase Demor'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  FirebaseUser _user;

  void _setUser(FirebaseUser user) {
    setState(() {
      _user = user;
    });
  }

  final GoogleSignIn _googleSignIn = GoogleSignIn();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<FirebaseUser> _handleSignIn() async {
    GoogleSignInAccount googleUser = await _googleSignIn.signIn();
    GoogleSignInAuthentication googleAuth = await googleUser.authentication;
    FirebaseUser user = await _auth.signInWithGoogle(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );
    print("signed in " + user.displayName);
    return user;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _user == null ? googleAuthBtn() : chat()
    );
  }

  Widget googleAuthBtn() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          FlatButton(
            padding: EdgeInsets.all(20.0),
            color: Colors.grey,
            onPressed: () {
              _handleSignIn()
                .then((FirebaseUser user) => _setUser(user))
                .catchError((e) => print(e));
            },
            child: Text('google認証'),
          ),
        ],
      ),
    );
  }

  Widget chat() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('chat')
        ],
      ),
    );
  }
}

```

google認証が完了していない場合こちらが表示され
<img width="396" alt="スクリーンショット 2018-12-12 7.25.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/318632/9513cc21-786e-0e6a-0a6f-eec7b307c668.png">

google認証が完了していたらこちらが表示されるようになります
<img width="389" alt="スクリーンショット 2018-12-12 7.25.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/318632/ce1c7fad-84c7-e130-5313-864612ab56ae.png">

Advent Calendar の[24日目](https://qiita.com/tanuki4/items/419fd9c802a1102e7e08)で実際にチャットの部分を実装して行きます。