【Amplify】federatedSignInのTypescriptエラーの解消方法

はじめに

この動画を参考にAmplify Authを使用してGoogleサインインを追加しようとしたら、以下の記述でTypescriptエラー「'provider' は型 'FederatedSignInOptionsCustom' に存在しません。」が発生したので解決策をまとめます。

Auth.federatedSignIn({ provider: "Google" })

結論

import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";
Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google }

or

Auth.federatedSignIn({ customProvider: "Google" })

のどちらかでTypescriptエラーを回避してGoogleサインインが出来ます。

型定義ファイルを確認してみる

@aws-amplify/authの型定義ファイルを確認すると3つのオーバーロードが存在します。

federatedSignIn(options?: FederatedSignInOptions): Promise<ICredentials>;
federatedSignIn(provider: LegacyProvider, response: FederatedResponse, user: FederatedUser): Promise<ICredentials>;
federatedSignIn(options?: FederatedSignInOptionsCustom): Promise<ICredentials>;

今回直接関係がありそうな、FederatedSignInOptionsとFederatedSignInOptionsCustomの中身を見てみようと思います。

FederatedSignInOptions

FederatedSignInOptionsにはproviderとcustomStateが存在し、CognitoHostedUIIdentityProviderはenumで各providerが定数で定義されています。

export declare type FederatedSignInOptions = {
   provider: CognitoHostedUIIdentityProvider;
   customState?: string;
};
 
export declare enum CognitoHostedUIIdentityProvider {
   Cognito = "COGNITO",
   Google = "Google",
   Facebook = "Facebook",
   Amazon = "LoginWithAmazon",
   Apple = "SignInWithApple"
}

そのため、providerを指定する場合はCognitoHostedUIIdentityProviderをimportし、enumの定数(Google)を指定する必要があります。

import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";
Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google }

やっていることは、

Auth.federatedSignIn({ provider: "Google" })

と何ら変わりないが、Typescriptのエラーを回避するためには上記の書き方をしなければいけないらしい。

FederatedSignInOptionsCustom

FederatedSignInOptionsCustomには、customProviderとcustomStateが存在します。
単純にproviderをcustomProviderに変更すればTypescriptエラーを回避できるみたいです。

Auth.federatedSignIn({ customProvider: "Google" })

おまけ

記事作成時時点(2021/11/23)でAmplify Docsには上から2つ目のオーバーロードのみ説明されています。
引数には、provider, response, userが必要です。

federatedSignIn(provider: LegacyProvider, response: FederatedResponse, user: FederatedUser)

LegacyProvider

'google' | 'facebook' | 'amazon' | 'developer' | string;

FederatedResponse

token: string; // providerから取得したtoken
identity_id?: string; // (任意) providerで指定されたidentity id
expires_at: number; // 有効期限

FederatedUser

name: string;
email?: string;
picture?: string;

興味がある人はドキュメントを読んで見て下さい。