20240205224309-amplifyでgithubログインしたい.org

AmplifyでGitHubログインしたい

直近やること

以下のサイトをそのままやってみてログインできるか試してみる

• https://github.com/TimothyJones/github-cognito-openid-wrapper こちらの方が良さそうなので先に試してみる
• https://sst.dev/examples/how-to-add-github-login-to-your-cognito-user-pool.html

できたら、Cognitoの設定を見比べてエラーを解決する

参考にできそうなサイト

• https://sst.dev/examples/how-to-add-github-login-to-your-cognito-user-pool.html
• https://github.com/aws-samples/cognito-custom-authentication
• https://github.com/TimothyJones/github-cognito-openid-wrapper
• https://qiita.com/tanaka_takurou/items/d5e20f86f75ae8725f73

Amplify

export function override(
    resources: AmplifyAuthCognitoStackTemplate,
) {
	  const idp = new cognito.CfnUserPoolIdentityProvider(
		  resources.userPool,
		  "GitHubIdp",
		  {
			  userPoolId: resources.userPool.ref,
			  providerType: "OIDC",
			  providerName: "GitHub",
			  providerDetails: {
				  client_id: "XXXX",
				  client_secret: "XXXXXX",
				  authorize_scopes: "openid user",
				  attributes_request_method: "GET",
				  oidc_issuer: "https://github.com",
				  authorize_url: "https://github.com/login/oauth/authorize",
				  token_url:
					  "https://XXXX.execute-api.ap-northeast-1.amazonaws.com/Prod/token",
				  attributes_url:
					  "https://XXXX.execute-api.ap-northeast-1.amazonaws.com/Prod/user",
				  jwks_uri:
					  "https://XXXX.execute-api.ap-northeast-1.amazonaws.com/Prod/token",
			  },
			  attributeMapping: {
				  email: "email",
				  name: "name",
				  picture: "avatar_url",
			  },
		  },
	  );
	  resources.userPoolClient.addDependency(idp);
	  resources.userPoolClientWeb.addDependency(idp);
	  resources.userPoolClient.supportedIdentityProviders = ["Google", "GitHub"];
	  resources.userPoolClientWeb.supportedIdentityProviders = ["Google", "GitHub"];
}

idpの設定

プロバイダ名

GitHub

クライアントID

クライアントシークレット

許可されたスコープ

識別子

属性リクエストメソッド

セット方法（手動入力）

発行者URL

トークンエンドポイント

UserInfoエンドポイント

Jwksエンドポイント

gh-login-test2

github-cognito-openid-wrapperをつかってる

1. 手動でCognitoのユーザープールを作成する
2. GitHubでOAuth Appを作成する

エラー諸々

http://localhost:5173/?error_description=GitHub+Error+-+502&state=XXXX&error=invalid_request

• GitHubのログイン画面は表示される
• ２要素認証後にアプリにはリダイレクトされるが、エラー
• GitHubのDeveloper SettingsのAuthorization callback URLにはhttps://XXX.auth.ap-northeast-1.amazoncognito.com/oauth2/idpresponse が設定されている
• CognitoのホストされたUIからログインしても同じエラー