Hi friends! :wave: I feel like I must be missing s...
# help
b
Hi friends! 👋 I feel like I must be missing something easy. I've gone through the SST Basics guide step by step. Things are working great! I'd like to add Google as an auth provider in addition to the Cognita Auth that's setup during the guide. I can't figure out how to connect the backend and frontend sides together to get this to work. Does someone have a working example of how to do this? Where does my Google client secret go? I'm only seeing a spot for the
google.clientId
in the Auth stack. Any help is much appreciated!
g
The Auth Stack will only step up you Cognito user pool and add google as a "authenticator provider" (technically the name is identity provider but i like to call it authenticator provider to not cause confusion with Cognito Identity provider that is a different service) With the auth stack created you can pass it down to your API stack. This will allow access to the API. Your backend is authenticated by cognito not but google. It turns out that cognito has google as one of its "source of identities". This means that your frontend will only talk to Cognito services and not google. Cognito will make the talk with google. That said: you can make the connection between frontend and Cognito via Amplify. As the guide shows. To make Amplify use google as the authenticator ("login with google"): You can create a button "login with google" in your login screen and put this in onClick event:
Copy code
Auth.federatedSignIn({
  provider: "Google"
})
Where Auth is the object from Amplify that the guide shows. This will take you to google login page. Another option is to use Amplify UI it comes with these buttons... https://ui.docs.amplify.aws/ https://ui.docs.amplify.aws/components/authenticator?platform=react#social-providers reference: https://aws-amplify.github.io/amplify-js/api/classes/authclass.html#federatedsignin
b
Thanks @Gabriel Araújo. I guess where I keep stumbling is the point where Amplify CLI gets involved. Nowhere in the SST Basics guide do we have to use Amplify CLI to
amplify add auth
. Why wouldn't I just use Amplify CLI to manage my entire stack instead of SST?
g
You don't need
Amplify CLI is an attempt from AWS to make easy to make apps. Where you can define your app resources via CLI commands. STT does something similar but via CDK. You can use just AmplifyJS that is a series of JS packages to interact with AWS from a browser. All you need to do to is setup AmplifyJS with existing resources (the case here since SST manages our resources) by creating a config file with your resources IDs and let AmplifyJS do the rest. Like here: https://serverless-stack.com/chapters/configure-aws-amplify.html
b
What do I need to change in this part to allow Google to be a configured provider?
Copy code
Amplify.configure({
  Auth: {
    mandatorySignIn: true,
    region: config.cognito.REGION,
    userPoolId: config.cognito.USER_POOL_ID,
    identityPoolId: config.cognito.IDENTITY_POOL_ID,
    userPoolWebClientId: config.cognito.APP_CLIENT_ID
  },
  //...
});
g
nothing..
This will point your frontend to cognito and your cognito instance has google as its authenticator
you need to change how you authenticate in react..
create a button in the login page and trigger this
Copy code
Auth.federatedSignIn({
  provider: "Google"
})
and to login with normal user/pass follow the guide: https://serverless-stack.com/chapters/login-with-aws-cognito.html To login with google we don't call:
Copy code
await Auth.signIn(email, password)
we call
Copy code
await Auth.federatedSignIn({ provider: "Google" })
this will open google.. and then you can put your google credentials
j
Yeah @manitej is working on a detailed example around this.