Learn how to add Login and Signup functionality to your custom React Native and Django app with Crowdbotics.
What is the Login and Signup component and how much does it cost?
A screen that allows the user to create a new account for the application and login with their email and password. It usually takes between 6.3 and 7.7 hours and costs $525 to add Login and Signup to an application.
How does the Login and Signup component work?
This feature is used to allow end users to register themselves with the application using their email address and password and then login with those credentials. It contains text input fields and a checkbox to capture a user's credentials and their consent. Each input field includes placeholder text and a custom icon. A background screen with custom screen colors is used for branding.
What is the Login and Signup component used for?
Here are some common Login and Signup user stories in a custom app build:
As a new user, I would like to enter my full name, email address, and password. As a new user, I would like to register with my credentials with the app by pressing a button. As an app user, I would like to login with my credentials with the app by pressing a button. As a returning user, I should be able to navigate back to the sign in screen. As a new user, my consent should be asked using a checkbox that I have read all terms and conditions of the application and I agree to them.
Login and Signup component README file
Basic Login Signup Screen
The Basic Login Signup Screen is a React Native-based screen that allows the user to login or signup.
Installation
After you have added the screen module into your project, you will need to configure a few items by modifying the project files in the github repository. Please note to replace ####### with the numeric sequence for your screen (found in folder name under /src/features), and also that the @BluePrint tags for ImportInsertion and NavigationInsertion will be removed in future so placement is with other imports and inside the AppNavigator above other screens.
STEP 1: Add dependency library to the project.
/PROJECT_ROOT_DIRECTORY/package.json:
ADD Dependency after Line 16 (dependencies opening line ""dependencies": { ")
"native-base": "^2.13.15",
STEP 2: Add screen into your project screen navigation.
/src/mainNavigator.js:ADD immediately below in the section labeled //@BlueprintImportInsertion:
import BasicLoginSignup#######Navigator from '../features/BasicLoginSignup#######/navigator';
ADD immediately below in the section inside AppNavigator definition labeled //@BlueprintNavigationInsertion section:
Near the end, before the export { store } line, register the new sagas sagaMiddleware like this:
sagaMiddleware.run(authRootSaga);
STEP 4: Change Login screen destination to your desired screen (likely Home screen).
Open the screens/constants.js file and edit the HOME_SCREEN_NAME value with desired destination screen (likely Home Screen). For example, if my home screen is called HomeScreen1234535, then I should change as follows: export const HOME_SCREEN_NAME = 'HomeScreen1234535'. If you desire, you can also update your logo image URL (be mindful that the size of the image should match the original ones for ideal results).
STEP 5: Modify backend
If your app's back-end does not have SENDGRID environmental variables available, Make changes to project backend files (in /backend/YOUR_PROJECT folder):
MODIFY: /backend/YOUR_PROJECT_NAME/settings.py version in your project backend folder
Using the Crowdbotics Dashboard, navigate to "Settings" and select the tab "Environment Variables", here you will add the following variables:
SENDGRID_USERNAME SENDGRID_PASSWORD
STEP 8: Update api url (optional)
If you have renamed your app through the Crowdbotics platform, you might need to change the reference url of your deployed app that is used to execute the api requests. To find out if you need to update, go to the file src/config/app.js and locate the emailAuthAPIEndPoint. If the value is your app's back-end url, then you do not need to change anything. If your current back-end url is different that what is shown there, update accordingly.
For example, after renaming my app from loginapp to personalapp, the code needs to be changed from:
export const appConfig = { // todo add library to handle env variables emailAuthAPIEndPoint: "https://loginapp-123.botics.co", ...
to
export const appConfig = { // todo add library to handle env variables emailAuthAPIEndPoint: "https://personalapp-123.botics.co", ...
Note for developer: you can access the user token through the authReducer state (i.e. state.authReducer.token and user auth information like e-mail at state.authReducer.user)
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change. Please make sure to update tests as appropriate.
This component does not yet have a README file. However, another Crowdbotics user may have created this component and shared it as a free community component.
This component is not yet available as a verified component in the Crowdbotics platform. However, another Crowdbotics user may have created it and shared it as a free community component.