FirebaseUIをSwiftUIで表示する

はじめに

Firebase Authenticationを使う上で簡単にSign-In画面を簡単に表示できるFirebaseUIを使うことはSign-In機能を使う上で開発効率をあげる上で重要だと考えています。
そこでSwiftUIを使ってFirbaseUIを表示する方法を考えました。
サンプルコードをGitHubで公開しています。

コードの解説

Swift Package Managerで導入

FirebaseUI 12よりCocoapods以外にもSwift Package Managerに対応しました。
簡単な手順とSign-In方法別に導入するパッケージ一覧をまとめます。

Step1.SPMのパッケージURLを指定する

File>Swift Packages>Add Package Dependency...を選択します。
Choose Package Repositoryというウィンドウがポップアップしますので、https://github.com/firebase/FirebaseUI-iOS.gitと入力します。

Step2.パッケージバージョン選択

Dependency RuleをBranchにする。横にmasterとなっているか確認します。
次に、Add Packageを選択する。

Step3.導入するパッケージの選択

Choose Package Products for FirebaseUI-iOSとウィンドウが出てきます。
ここでSign-In方法別に導入するパッケージを選択します。(主なパッケージとその内容は表を参照)
選択が終わったらAdd Packageを選択します。

パッケージ名	内容	必須/任意
FirebaseAnonymousAuthUI	匿名ログイン	任意
FirebaseAuthUI	FirebaseUIのコア	必須
FirebaseDatabaseUI	Firebaseデータベース用のUI	対象外
FirebaseEmailAuthUI	Emailログイン	任意
FirebaseFacebookAuthUI	Facebookログイン	任意
FirebaseFirestoreUI	Firestore（データベース）用のUI	対象外
FirebaseGoogleAuthUI	Googleログイン	任意
FirebaseOAuthUI	Sign in with Apple, Twitterなど	任意
FirebasePhoneAuthUI	電話番号	任意
FirebaseStorageUI	Cloud Storage用のUI	対象外

初期化について

Xcode12よりLifeCycleという項目が追加されSwiftUI App時にどのように書けばわからなかったで追加で調査しました。(Xcode13よりSwiftUIを選択すると自動的にLifeCycleがSwiftUI Appとなりますので選択肢は無くなりました。)
下記のようにすればUIKit App Delegate同等になります。参考にしてください。

FirebaseUIAppApp.swift

class AppDelegate: NSObject, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        FirebaseApp.configure()
        
        return true
    }
    // MARK: URL Schemes
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any]) -> Bool {
        let sourceApplication = options[UIApplication.OpenURLOptionsKey.sourceApplication] as! String?
        if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {
            return true
        }
        // other URL handling goes here.
        return false
    }
}

@main
struct ChatAPPApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var delegate
    
    var body: some Scene {
        WindowGroup {
            HomeView()
        }
    }
}

FirebaseUIを表示するView

UIKit系のFirebaseUIを表示するために、UIViewControllerRepresentableを利用して表示します。
サンプルコードでは、FirebaseAuthUIView.swiftに記述しました。

基本的にはリファレンスマニュアル通りの実装内容となっています。

また、Sign in with Appleが最近のFirebaseUIでも利用可能になっています。authUI.providersのArrayリストにFUIOAuth.appleAuthProvider()を追加する必要があります。

        // サポートするログイン方法を構成
        let providers: [FUIAuthProvider] = [
            FUIGoogleAuth(authUI: authUI),
            FUIFacebookAuth(authUI: authUI),
            FUIOAuth.twitterAuthProvider(),
            FUIPhoneAuth(authUI:authUI),
            FUIOAuth.appleAuthProvider(),
        ]
        authUI.providers = providers

SignIn状態の管理

SignIn状態を管理し表示をコントロールするためにObservationを使っています。
AuthenticationManagerと命名しました。（ネーミングセンスが悪くてすみません）
コードはリファレンスマニュアル-認証状態をリッスンするを参考にしました。

Googleログインでクラッシュする

Firebase公式ドキュメントのGoogle ログインを実装するの中にある「1.Xcode プロジェクトにカスタム URL スキームを追加します。」を手順を実施しカスタムURLスキームを設定してください。

最後に

FirebaseUIの実装例が少ないと感じています。
リファレンスマニュアル通りといえばそうですが、サンプルプロジェクトがあると便利かと思い作成しました。
参考になれば幸いです。

Cocoapodsの記述

SwiftPackageManagerに移行してきましたが、Cocoapodsの記述についてもAppendixとして残しておきます。

pod 'FirebaseUI' と記述してもいいのですが、利用するSin-In方法を個別に指定することができます。
個別に指定することによってビルド時間の短縮が期待できます。
pod 'FirebaseUI/Auth' は必須です。注意が必要です。

podfileに記述する内容	内容	必須/任意
pod 'FirebaseUI/Auth'	FirebaseUIのコア	必須
pod 'FirebaseUI/Google'	Googleログイン	任意
pod 'FirebaseUI/Facebook'	Facebookログイン	任意
pod 'FirebaseUI/OAuth'	Sign in with Apple, Twitterなど	任意
pod 'FirebaseUI/Phone'	電話番号	任意