FirebaseUIでアプリにログイン 〜UIkit メールリンク認証・GoogleSignIn~

# Firebase UIとは
FirebaseUIを用いることで簡単にメールリンク、Google、Appleアカウント、Facebook等でアプリにログインすることができるFirebase Authentication SDK の上に構築されるライブラリです。
今回は下記のようなメールリンク認証とGoogleSignInの実装方法について説明します。
![0e6f3391b1e32e2619f3644f4560fc68.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/567c7185-d9b5-4572-0227-8710547b88c9.png)


参考文献

https://firebase.google.com/docs/auth/ios/firebaseui?hl=ja

# Firebase SPMの追加
●下記の2つのSPMを追加
![c3a0629eab67450618dc84a887f8ce65 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/b16a219c-ba92-08b4-2873-4e983b443aad.png)

```swif:
https://github.com/firebase/firebase-ios-sdk
```
参考文献

https://qiita.com/ruwatana/items/80da4b1d5f4906bdd38c

```swif:
https://github.com/firebase/FirebaseUI-iOS.git
```
参考文献

https://qiita.com/From_F/items/5888c548a9a41232509f

● Firebase console上のAuthenticationのメール認証とGoogle認証を有効にする
※Google認証を有効にした後、GoogleService-Info.plistのファイルをダウンロードし、Xcode上のファイルを置き換える。
![195afa78cb2d71007c17a4f07df1081e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/0b281cb2-a955-35b1-8673-bc63676d5eee.png)

参考文献

https://tech.amefure.com/swift-firebase-authentication-google

# コードでFirebaseUIの実装

```swift:AppDelegaye.swift
import UIKit
import FirebaseCore
import FirebaseAuthUI


@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        //🟥 コードを追加
        FirebaseApp.configure()
        return true
    }

//🟥下記のメソッドを追加
    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {

        guard let sourceApplication = options[.sourceApplication] as? String? else { fatalError() }

        if FUIAuth.defaultAuthUI()?.handleOpen(url, sourceApplication: sourceApplication) ?? false {

            return true
        }
        return false
    }
}

```


```swift:ViewController.swift
import UIKit
import FirebaseAuthUI
import FirebaseGoogleAuthUI
import FirebaseEmailAuthUI

//ViewControllerをFUIAuthDelegateプロトコルに対
class ViewController: UIViewController, FUIAuthDelegate {
    //FUIAuthのインスタンスを取得
    let authUI = FUIAuth.defaultAuthUI()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupFirebaseUI()
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        guard let authViewController = authUI?.authViewController() else { return }
        //🟩1. フルスクリーン表示に
        authViewController.modalPresentationStyle = .fullScreen
        self.present(authViewController, animated: true)
    }

    private func setupFirebaseUI() {
        //delegate先をViewControllerに
        authUI?.delegate = self
        let emailAuthProvider = FUIEmailAuth()
        let googleAuthProvider = FUIGoogleAuth(authUI: authUI!)
        let providers: [FUIAuthProvider] = [emailAuthProvider, googleAuthProvider]
        authUI?.providers = providers
        //🟩2.Cancelを非表示に
        authUI?.shouldHideCancelButton = true
    }
    //🟩カスタムしたクラスを割り当てる
    func authPickerViewController(forAuthUI authUI: FUIAuth) -> FUIAuthPickerViewController {
        return CustomAuthPickerViewController(authUI: authUI)
    }

    //認証結果を受け取る際に呼ばれる関数
    func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?) {

        if let _ = user {
            print("sucess")
            // ログイン成功処理
        }
        else {
            print("error")
            // ログイン失敗処理
        }
    }
}
```

# 🟩FirebaseUIをカスタムしたい！
今回は下記のようなカスタムを行いました！
1. フルスクリーン表示にする
2. Cancelボタンを非表示にする
3. Navigationのtitleをようこそからサインインに変更
4. 背景色を変更
5. FirebaseUIのボタンを英語表示から日本語表示に変更

●FUIAuthPickerViewController を継承したクラスを作成することでカスタム
```swift:ViewController.swift
//🟩 カスタムする
class CustomAuthPickerViewController: FUIAuthPickerViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.subviews[0].subviews[0].subviews[0].subviews.forEach { (view: UIView) in
            // 一旦上に乗ってるViewを透明にする
            let scrollView = self.view.subviews[0]
            scrollView.backgroundColor = .clear
            let contentView = scrollView.subviews[0]
            contentView.backgroundColor = .clear
            //🟩4.背景色を変更
            self.view.backgroundColor = .yellow
        }
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        //🟩3.タイトルはサインインに変更
        self.title = "サインイン"
    }
}
```

🟩5.FirebaseUIのボタンを英語表示から日本語表示に変更
PROJECT > Info > Localization > +からJapanese選択 > SetDefaultでJapanese選択

![497e1ae26a61c0ead8a7b8a40316c895 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/e85f36a9-01b6-671b-766e-98e7060ec229.png)
## カスタム前
![924bde718632b6b63e03f37596addbcf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/6ec09435-3601-375f-28d4-3d00370fa34e.png)

## カスタム後
カスタム後、下記のようなFirebaseUIを実現することができました！
![bf017dedab75ba2d1c3c779a87fd42b0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3090887/5c809f6d-8265-02c5-79ed-d59910f3a001.png)


参考文献

https://qiita.com/m-inada0408/items/ab90858ea9b0de64c8d7

https://qiita.com/m_okubo/items/22199afa31894ba7ad02

https://zenn.dev/paraches/articles/firebase_authui

# 終わりに
UIkitでFirebaseUIを実装している例が少なく苦戦したので記事を書いてみました。
初めてFirebaseUIを実装したので、間違っているところ等ありましたらアドバイスいただけるとありがたいです！