For parler.io I have been experimenting with adding authentication to the project. This would allow conversions to be tied to users and enable a sl...
For further actions, you may consider blocking this person and/or reporting abuse
Hey everyone, due to a recent change to the Amplify signIn function, you now have to pass the event into your super.signIn function on line 61-ish:
in customSignIn.js around line 61onClick={() => super.signIn()} ---> onClick={(event) => super.signIn(event)}or you will get this error:
Uncaught (in promise) TypeError: Cannot read property 'preventDefault' of undefined.Here is the changes they made: github.com/aws-amplify/amplify-js/...
Here is the article I used to figure out what was wrong: stackoverflow.com/questions/475077...
Hi Kyle,
Was there some reason to not use the withAuthenticator()? As far as I understood from reading the docs, you can pass customized components to withAuthenticator too.
Here is a link to the part of docs I'm talking about:
aws-amplify.github.io/docs/js/auth...
If I understood the docs correctly, you could have just passed the CustomSignIn-component to the withAuthenticator.
Great question! I didn't use
withAuthenticatorbecause I always wanted to usehide=[]to hide a lot of the default Amplify screens that I didn't need.Kyle wrote:
Isn't that what the TRUE/FALSE tag in withAuthenticator is used for?
Set it to TRUE (hide=[NONE]) and all AWS-components are shown.
Set it to FALSE (hide=[ALL]) like this and add your custom component(s) into an array:
And only component is shown (and all the other custom components in the list). Of course you can also add standard AWS-components to the list there.
No the true/false for the HOC is for showing greetings. You could probably get this setup to work with the HOC but I preferred to go this route in the event I have further customization I need to make.
Ahh, thanks. Couldn't find that in docs, so jumped to a coclusions, since it seemed to work that way (I just wanted the Greeting away and thought it did it to other components too...)
Ok, have to look into that myself a bit more. Great article and helped me a lot :)
Nice article Kyle! Easy to follow and explains the steps but not overly verbose, nice pacing.
I saw a AWS team demo this a Neilson a couple months back during a MeetUp. Makes me want to get into mobile dev. :)
Thank you for the kind comments David! It is a very slick framework and it is continuously being improved, definitely worth checking out.
Inheritance? In my React?! xD
React is certainly not my strongest area of expertise. Certainly, composition would be better here, but getting this customized to fit my needs was a jaunt in itself. Maybe I can circle back to this in the future.
Yes, the clean way would probably be to use the auth function calls directly, but I guess this is also more work.
I'm new to amplify and react as well. Is there an article that guides you in building a custom login page using amplify and modern react with functional components and hooks?
Good article, but I do not quite understand how App and AppWithAuth are interrelated. What component do we include in index.js? And how do we generally connect AppWithAuth?
At the highest level, you would include
AppWithAuthas the entry point for your app. This allows you to wrap your entire application with an authentication layer as demoed here.It would be cool to add an article with examples for react-native. The library aws-amplify-react-native is slightly different and I'm having difficulty with changeState for forgotPassword and signUp
Any idea of how to circumvent:
TS2339: Property 'authState' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'.
in App, at:
if (this.props.authState === 'signedIn')
?