[Vue] Facebook Login Component

[cliffordh]

I created a FacebookButton.vue component which I'm trying to use with the Amplify Authenticator framework. It "kind of" works, in that I'm able to make the Facebook permission prompt appear and get a succesful return to my component. In the component I'm trying to emit authState. The result on emitting authState signedIn is that the authenticator disappears... however I'm unable to get into my app. I've linked to the StackOverflow post with a full code example of the component.

Any suggestions are welcome!

https://stackoverflow.com/questions/54162881/facebook-login-component-using-vue-js-and-amplify

[cliffordh]

Nevermind I figured it out. Although, this was just the first step and used the Federated Pool. Instead my goal was to use User Pools with a Federated Identity provider. Unbelievably I got it to work without using the Hosted UI (still calls out to amazoncognito.com/authorize/oauth2) but redirects to my app and creates a Cognito user. All done using Vue. Once I clean things up I'll post a component that handles Facebook login using Vue with User Pools. My whole reason for wanting to use User Pools instead of the Federated Identity Pool is to write custom attributes on the backend for recurring subscription purposes.

[undefobj]

Hello everyone, we have created an RFC for feature work that should make the challenges found in this issue easier in the future. If you have a moment please read through the details and add any comments: #2716

Your feedback in the RFC will help us ensure that we are delivering the best experience possible. Thank you.

[donaldev]

Hi @cliffordh, currently have something similar set up in React for web. I'm navigating the user to the authorize endpoint and it redirects back to my application, after it redirects I call Auth.configure and Auth.getCurrentAuthenticatedUser => however this returns null.
I did some digging and found that you could use the Hub Module to listen for a 'signIn' event and if that event occurs I call getCurrentAuthenticatedUser (this returns a cognito user object).
My issue is directing my user to the 'authenticated routes' after I get the above step (after navigating to /home if I call getCurrentAuthenticatedUser it will return null again).
Have you a solution I could perhaps look at to help? I feel like the Hub.listen method is a bit messy and hoped to find another way as I'm getting nowhere with it.

[migueldiaz66]

Nevermind I figured it out. Although, this was just the first step and used the Federated Pool. Instead my goal was to use User Pools with a Federated Identity provider. Unbelievably I got it to work without using the Hosted UI (still calls out to amazoncognito.com/authorize/oauth2) but redirects to my app and creates a Cognito user. All done using Vue. Once I clean things up I'll post a component that handles Facebook login using Vue with User Pools. My whole reason for wanting to use User Pools instead of the Federated Identity Pool is to write custom attributes on the backend for recurring subscription purposes.

Nevermind I figured it out. Although, this was just the first step and used the Federated Pool. Instead my goal was to use User Pools with a Federated Identity provider. Unbelievably I got it to work without using the Hosted UI (still calls out to amazoncognito.com/authorize/oauth2) but redirects to my app and creates a Cognito user. All done using Vue. Once I clean things up I'll post a component that handles Facebook login using Vue with User Pools. My whole reason for wanting to use User Pools instead of the Federated Identity Pool is to write custom attributes on the backend for recurring subscription purposes.

Hi @cliffordh, can you post your Vue component code please?

[IanAtDazed]

Hi @cliffordh, I would also be very grateful if you would post your Vue component. Please can you provide it? Thanks!

[Christilut]

@cliffordh Me too!

[praetp]

I'd be interested as well !

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.