The aim of this post to prepare Login, Register, Remember Password and Authenticated Page example. I added GitHub and expo link end of the project. Before start to explain code behind, the output will be as follows.
Firstly, I prepared this pages for my next projects. No service implementation. Just screens and validations. You can update these pages quickly and implement your services to this screens.
I used ui-kitten for page design and react-navigation for page navigation. I added descriptions in page too. Let’s get start to examine to codes.
Firstly, I created all pages in Root/Pages folder. I defined my all pages in App.js for react-navigation and I didn’t want a header for my pages. Because of that I added headerShown : false property. The screenshot is as follows.
Next page is Mainpage. Application is starting from this page. Why do I use this page? I use this page for navigate member to correct page. I used react-hooks for state management and I have two state in this page. That’s loading and memberStatus. When application start, loading‘s value will be true and member will be seeing loading spinner. In that time, Application will be checking member status from device storage. After result, user will see login page or application starter page. The screenshot is as follows.
I continue from login page after this control. User can authenticate to application via this page. Except that, they can access to register page and remember password page from in this page. The login page have a validation. If you don’t write anything in username and password field, you can’t click to login button. Username and password value’s should be longer than 3 characters. The value length would be update from the code behind. This page don’t have service implementation like other pages. The api request can add in authorise method for user authentication. If you have user in your records who have this username and password, you can set true for login variable. If you don’t have, you should set false for this value. The page screenshot is as follows.
I added two buttons on login button’s bottom. Member’s can use this for access register and remember password page. You can update that buttons or you can modify that. After logged in example page as follows.
This page is just example for authorized pages. After succeeded login, member will redirect this page and then go back button’s history will be reset. It’s mean, member can’t return to login page. It’s just possible with logout button. When user click to logout button, login variable will be false and user will redirect to login page.
Next page is reset password page. Member can access this page via Forgot Password? button on login page. This page is working like a login page, just validation. The screenshot is as follows.
The last page is register page. This page like a login and remember password page. Just design and validation. The screenshot is as follows.
This is not project all by itself. Like an authentication template on create a project screen.
Once and for all, I talked about value insert on device storage and navigation. You can see that codes in Root/Operations folder. I added comment in this two file.
See you on next posts 🙂