feat: add social providers

package.json

@@ -47,10 +47,10 @@
   "dependencies": {
     "@aws-amplify/auth": "^3.4.12",
     "@aws-amplify/core": "^3.8.4",
-    "amazon-cognito-identity-js": "^4.5.5",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "amazon-cognito-identity-js": "^4.5.5",
     "clsx": "^1.1.1",
     "final-form": "^4.20.1",
     "react-final-form": "^6.5.2"
@@ -91,8 +91,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
+    "rimraf": "^3.0.2",
     "styled-components": "^5.2.1",
-    "typescript": "^4.0.3",
-    "rimraf": "^3.0.2"
+    "typescript": "^4.0.3"
   }
 }

src/hooks/useFacebookSignIn.ts

@@ -0,0 +1,21 @@
+import { Auth } from '@aws-amplify/auth';
+import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth/lib/types';
+
+export interface UseFacebookSignInProps {
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
+}
+
+export const useFacebookSignIn = ({
+  onSuccess,
+  successMsg,
+}: UseFacebookSignInProps = {}): (() => Promise<void>) => {
+  return async () => {
+    await Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Facebook }).then(
+      async (response) => {
+        onSuccess && (await onSuccess(response));
+        return successMsg;
+      },
+    );
+  };
+};

src/hooks/useGoogleSignIn.ts

@@ -0,0 +1,21 @@
+import { Auth } from '@aws-amplify/auth';
+import { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth/lib/types';
+
+export interface UseGoogleSignInProps {
+  onSuccess?: (values: any) => Promise<void>;
+  successMsg?: string;
+}
+
+export const useGoogleSignIn = ({
+  onSuccess,
+  successMsg,
+}: UseGoogleSignInProps = {}): (() => Promise<void>) => {
+  return async () => {
+    await Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google }).then(
+      async (response) => {
+        onSuccess && (await onSuccess(response));
+        return successMsg;
+      },
+    );
+  };
+};

src/index.ts

@@ -15,6 +15,8 @@ export { useRequestConfirmationCode } from './hooks/useRequestConfirmationCode';
 export { useConfirmSignupCode } from './hooks/useConfirmSignupCode';
 export { useRequestResetCode } from './hooks/useRequestResetCode';
 export { useSetNewPassword } from './hooks/useSetNewPassword';
+export { useFacebookSignIn } from './hooks/useFacebookSignIn';
+export { useGoogleSignIn } from './hooks/useGoogleSignIn';
 export { getToken } from './providers/auth/getToken';
 export { PageLoading } from './components/PageLoading/PageLoading';
 export { Card } from './components/Card/Card';

src/providers/IntentbaseProvider.tsx

@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import { Theme } from '@material-ui/core/styles/createMuiTheme';
+import { OAuthOpts } from '@aws-amplify/auth/lib/types';
 import { defaultTheme } from '../theme';
 import { configureAmplify } from '../utils/configureAmplify';
 import { SnackbarContextProvider } from './SnackbarProvider';
@@ -16,6 +17,7 @@ interface IntentbaseProps {
   awsCognitoRegion?: string;
   awsCognitoUserPoolId: string;
   awsCognitoUserPoolWebClientId: string;
+  awsCognitoOAuth: OAuthOpts;
   environment?: Environment;
   getApiUser?: (cognitoUser?: CognitoUser) => Promise<any>;
 }
@@ -25,12 +27,19 @@ export const IntentbaseProvider: FC<IntentbaseProps> = ({
   awsCognitoRegion = 'us-east-1',
   awsCognitoUserPoolId,
   awsCognitoUserPoolWebClientId,
+  awsCognitoOAuth,
   theme = defaultTheme,
   environment = 'production',
   getApiUser,
 }) => {
   try {
-    configureAmplify(awsCognitoRegion, awsCognitoUserPoolId, awsCognitoUserPoolWebClientId);
+    console.log('Amplify Setup');
+    configureAmplify(
+      awsCognitoRegion,
+      awsCognitoUserPoolId,
+      awsCognitoUserPoolWebClientId,
+      awsCognitoOAuth,
+    );
   } catch (error) {
     if (environment !== 'production') {
       console.error('AWS Secrets required');

src/providers/auth/useCognitoUser.ts

@@ -71,14 +71,17 @@ export function useCognitoUser(): {
     isMountedRef.current = true;
 
     const updateUser = async () => {
+      console.log('Update User Event');
       try {
         const cognitoUser = await Auth.currentAuthenticatedUser({
           bypassCache: false,
         });
+        console.log('Cognito user:', cognitoUser);
         if (isMountedRef.current) {
           setState({ user: mapCognitoUser(cognitoUser), loading: false });
         }
       } catch (error) {
+        console.warn('Error', error);
         if (isMountedRef.current) {
           setState({ user: undefined, loading: false });
         }

src/utils/configureAmplify.ts

@@ -1,15 +1,20 @@
 import Amplify from '@aws-amplify/auth';
+import { OAuthOpts } from '@aws-amplify/auth/lib/types';
 
 export const configureAmplify = (
   region: string,
   userPoolId: string,
   userPoolWebClientId: string,
+  oauth: OAuthOpts,
 ): void => {
   Amplify.configure({
     Auth: {
       region,
       userPoolId,
       userPoolWebClientId,
+      oauth: {
+        ...oauth,
+      },
     },
   });
 };