community-content
community-content copied to clipboard
strapi
[SUBMIT] User Authentication with React and Strapi
User Authentication with React and Strapi
Introduction
React is a popular choice for building complex web applications. Almost every web application requires user authentication. One of the popular options is to make use of a social login provider like Google or Facebook. Uniquely we can build authentication with React and Strapi backend.
Goal In this article we are going to create a react login form that uses Strapi for its backend. this article is both beginner and intermediate level developer-friendly.
Outline
- Preparing development area
- creating a new strapi application
- Starting App State
- Create the Login component
- Adding React Hooks
- Starting the JSX
- Username Input
- Password Input
- Finish the form
- handle submit function
- Displaying the success screen
- Testing the form
- Creating Auth context and state
- Conclusion
-->
My content is
- [ ] A Strapi Tutorial / Guide / How to article
What do you all think? ❤️ I love it! 🚀 I can help you!
Thank you for submitting your article proposal.
Thank you for submitting the outline @marvelken interesting - im just thinking that we have had some similar articles published already on the blog, maybe we can develop / add functionality in this tutorial? here's a link to our blog - https://strapi.io/blog - @TiaraOluwanimi what do you think?
Hi Shada, So sorry for the belated reply, I have been shocked up with work. About the article I feel there are much differences, maybe writing it will show how different they both are, Should I go on?
On Thu, May 5, 2022, 12:46 PM Shada @.***> wrote:
Thank you for submitting the outline @marvelken https://github.com/marvelken interesting - im just thinking that we have had some similar articles published already on the blog, maybe we can develop / add functionality in this tutorial? here's a link to our blog - https://strapi.io/blog - @TiaraOluwanimi https://github.com/TiaraOluwanimi what do you think?
— Reply to this email directly, view it on GitHub https://github.com/strapi/community-content/issues/770#issuecomment-1118456365, or unsubscribe https://github.com/notifications/unsubscribe-auth/AUKS3BMU67CZ5KH4O4MKKZLVIOYJNANCNFSM5RZNVA3A . You are receiving this because you were mentioned.Message ID: @.***>
Hey Guys i am looking for this for months i can't even find a single tutorial on this . you can aslo add how to persist user in react
This issue has been mentioned on Strapi Community Forum. There might be relevant details there:
https://forum.strapi.io/t/can-anyone-help-me-how-to-use-react-strapi-auth-with-email-with-user-persist-in-session-thruough-context/20512/1
Hello @Sachin-chaurasiya 👋 Are you still interested in writing this article?
Hello @Sachin-chaurasiya 👋 Are you still interested in writing this article?
Hello @dessireugarte, Yes, I would love to 💯 . Please assign this issue to me.
User Authentication with React and Strapi
Introduction
React is a popular choice for building complex web applications. Almost every web application requires user authentication. One of the popular options is to make use of a social login provider like Google or Facebook. Uniquely we can build authentication with React and Strapi backend.
Goal In this article we are going to create a react login form that uses Strapi for its backend. this article is both beginner and intermediate level developer-friendly.
Outline
Preparing development area
creating a new strapi application
Starting App State
Create the Login component
- Adding React Hooks
- Starting the JSX
- Username Input
- Password Input
Finish the form
- handle submit function
- Displaying the success screen
- Testing the form
Creating Auth context and state
Conclusion
-->
My content is
- [ ] A Strapi Tutorial / Guide / How to article
What do you all think? ❤️ I love it! 🚀 I can help you!
Thank you for submitting your article proposal.
Also the user persistance
Great @Sachin-chaurasiya! If this is your first article, can you please register your author details here by filling out the form. Then please scroll to the FAQ section and review the article guidelines, how to submit an article, issue an invoice and get paid.
Before getting started, can you confirm what the outline would look like?
Great @Sachin-chaurasiya! If this is your first article, can you please register your author details here by filling out the form. Then please scroll to the FAQ section and review the article guidelines, how to submit an article, issue an invoice and get paid.
Before getting started, can you confirm what the outline would look like?
Thanks, @dessireugarte, I will do that. Should I share the outline here or somewhere else?
Great @Sachin-chaurasiya! If this is your first article, can you please register your author details here by filling out the form. Then please scroll to the FAQ section and review the article guidelines, how to submit an article, issue an invoice and get paid.
Before getting started, can you confirm what the outline would look like?
@dessireugarte I have filled the form, please check.
Thanks @Sachin-chaurasiya ! You share the outline here please
Yes, I will share it here!
@dessireugarte Here is the outline for the topic.
Topic: User Authentication with React and Strapi
Outline:
- Introduction
- About the topic
- About the project that we will be building
- Setting up the development environment
- Creating a new strapi application
- Creating Collections
- Creating Relations between collections
- Creating React Application
- Installing required dependencies
- Creating Auth context for managing current user
- Creating Auth forms
- SignIn
- SignUp
- SignUp flow
- User inputs
- Error handling
- Displaying Success screen
- SignIn Flow
- User inputs
- Error handling
- Displaying Success screen
- Logout flow
- Conclusion
Hello @Sachin-chaurasiya 👋 Thanks for the outline. You can start writing your draft. We use Dropbox Paper to submit and review drafts. Please duplicate and use this article template.
Once your article is ready, please share the dropbox link to your article in a comment on this GitHub issue.
Hello @Sachin-chaurasiya 👋 Thanks for the outline. You can start writing your draft. We use Dropbox Paper to submit and review drafts. Please duplicate and use this article template.
Once your article is ready, please share the dropbox link to your article in a comment on this GitHub issue.
Sure @dessireugarte, Thank you 🚀 .
Hey @dessireugarte , Just to provide an update. I'm almost finished with the draft, I will share the draft link by Sunday (IST). Thank you!
Hello @dessireugarte , Here is the link for the draft article. Please share your feedback. https://www.dropbox.com/scl/fi/97wv008otqhpdqd8hsvcw/User-Authentication-with-React-and-Strapi-v4.paper?dl=0&rlkey=17e291tpv7llqio3kyj2l6dga
Thanks for the review @TiaraOluwanimi, excited to see my first article on the strapi blog 🚀 .
Hello @dessireugarte , Is there any update on when we are publishing this article?
Hello @Sachin-chaurasiya 👋 Just wanted to let you know that your article will be published around the third week of October. I'll let you know when it is published!
Hello @Sachin-chaurasiya 👋 Just wanted to let you know that your article will be published around the third week of October. I'll let you know when it is published!
Hello, @dessireugarte 👋 Thanks for the update.
Hello @Sachin-chaurasiya 👋 Your article is live! 🎉 Please register to our forum by clicking on the discussion at the bottom of your post, so you automatically receive notifications when someone adds comments. Also please follow the guidelines to issue and submit an invoice. Now you can submit your invoice here, and soon you will receive your payment. If you want to promote your article, here are some ideas and templates that might help you! Please feel free to reach out to me if you have any questions!
Hello @Sachin-chaurasiya 👋 Your article is live! 🎉 Please register to our forum by clicking on the discussion at the bottom of your post, so you automatically receive notifications when someone adds comments. Also please follow the guidelines to issue and submit an invoice. Now you can submit your invoice here, and soon you will receive your payment. If you want to promote your article, here are some ideas and templates that might help you! Please feel free to reach out to me if you have any questions!
Thank you so much @dessireugarte 🚀 . Looking forward to more contributions.