https://serverless-stack.com/ logo
Join Slack
Powered by
I am trying to implement google login and facebook...
# help
k
I am trying to implement google login and facebook login on my react frontend. I have this in my authstack atm
Copy code
export function AuthStack({ stack, app }) {
  const { bucket } = use(StorageStack);
  const { api } = use(ApiStack);

  const auth = new Auth(stack, "Auth", {
    login: ["email"],
    identityPoolFederation: {
      google: {
        clientId:
          "<http://1097663769791-MYGOOGLECLIENTID.apps.googleusercontent.com|1097663769791-MYGOOGLECLIENTID.apps.googleusercontent.com>",
      },
    },
  });

  auth.attachPermissionsForAuthUsers([
    api,
    new iam.PolicyStatement({
      actions: ["s3:*"],
      effect: iam.Effect.ALLOW,
      resources: [
        bucket.bucketArn + "/private/${<http://cognito-identity.amazonaws.com:sub|cognito-identity.amazonaws.com:sub>}/*",
      ],
    }),
  ]);

  stack.addOutputs({
    Region: app.region,
    UserPoolId: auth.userPoolId,
    IdentityPoolId: auth.cognitoIdentityPoolId,
    UserPoolClientId: auth.userPoolClientId,
  });

  return { auth };
}
I found one for Facebook on github https://github.com/AnomalyInnovations/serverless-stack-demo-fb-login-client But is it the same for google?
g
k
oh thx
the docs really need come contributing 😀
hey I want to use google and facebook login
where do I add facebook if I already have this ?
Copy code
const auth = new Auth(stack, "Auth", {
    cdk: {
      userPoolClient: {
        supportedIdentityProviders: [
          cognito.UserPoolClientIdentityProvider.GOOGLE,
        ],
        oAuth: {
          callbackUrls: [
            app.stage === "prod"
              ? "prodDomainNameUrl"
              : "<http://localhost:3000>",
          ],
          logoutUrls: [
            app.stage === "prod"
              ? "prodDomainNameUrl"
              : "<http://localhost:3000>",
          ],
        },
      },
    },
  });
Also I am using React but this documentation uses Vite
g
@Kenny Vite is just a tool. If you read the whole tutorial, the application is react.
Copy code
supportedIdentityProviders is an array you can add both providers in the array.
k
So I can just use ReactStaticSite right?
and for this
Copy code
const provider = new cognito.UserPoolIdentityProviderGoogle(stack, "Google", {
  clientId: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  userPool: auth.cdk.userPool,
  scopes: ["profile", "email", "openid"],
  attributeMapping: {
    email: cognito.ProviderAttribute.GOOGLE_EMAIL,
    givenName: cognito.ProviderAttribute.GOOGLE_GIVEN_NAME,
    familyName: cognito.ProviderAttribute.GOOGLE_FAMILY_NAME,
    profilePicture: cognito.ProviderAttribute.GOOGLE_PICTURE,
  },
});
I need to have two providers one for google and one for facebook
g
yes and yes.
k
ok, Im going to try it out.
@Gabriel
I need to add this for google auth in my api
Copy code
const api = new Api(stack, "Api", {
    authorizers: {
      userPool: {
        type: "user_pool",
        cdk: {
          authorizer: new apigAuthorizers.HttpUserPoolAuthorizer(
            "Authorizer",
            auth.cdk.userPool,
            {
              userPoolClients: [auth.cdk.userPoolClient],
            }
          ),
        },
      },
    },
    defaults: {
      authorizer: "userPool",
    },
    routes: {
      
    },
  });
But I have this
Copy code
const api = new Api(stack, "Api", {
    //We are creating an API using SST's Api construct.
    defaults: {
      authorizer: "iam",
      function: {
        permissions: [table], //We are giving our API permission to access our DynamoDB table
        environment: {
          TABLE_NAME: table.tableName, //We'll need this to query our table.
          STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
        },
      },
    },
    routes: {
     
    },
  });
at the moment
for user just to authenticate using their email
How do I merge them
I want user to be able to use their email or google account
and fb ofc
I did this
Copy code
authorizers: {
      userPool: {
        type: "user_pool",
        cdk: {
          authorizer: new apigAuthorizers.HttpUserPoolAuthorizer(
            "Authorizer",
            auth.cdk.userPool,
            {
              userPoolClients: [auth.cdk.userPoolClient],
            }
          ),
        },
      },
    },
    defaults: {
      authorizer: "userPool",
      function: {
        permissions: [table], //We are giving our API permission to access our DynamoDB table
        environment: {
          TABLE_NAME: table.tableName, //We'll need this to query our table.
          STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
        },
      },
    },
g
when specifying your auth you can specify your cognito as provider
Copy code
const auth = new Auth(stack, "Auth", {
            cdk: {
                userPoolClient: {
					supportedIdentityProviders: [
						cognito.UserPoolClientIdentityProvider.COGNITO,
						cognito.UserPoolClientIdentityProvider.GOOGLE,
						cognito.UserPoolClientIdentityProvider.FACEBOOK
					]
				},
            },
        });
k
Ah ok
that means they can just login with their email too
20 Views
Open in Slack
PreviousNext
Powered by