FlatList
StackNavigator
react-navigation
axios
TextInput
static navigationOptions
this.props.navigation
this.props.navigation.navigate('Route')
AsyncStorage
(It's likelocalStorage
in the browser but async)
For your assignment you will be creating a mobile application with four views that connects to an api: https://mobile-server-ii.herokuapp.com/
Home:
This view will have two buttons.
Button one will say Sign In
and will navigate the user to the SignIn
component.
Button two will say Sign Up
and will navigate the user to the SignUp
component.
SignUp:
This view will have two input fields and a button that says Sign Up
.
The first input field will be for the email
.
The second input field will be for the password
.
When the user clicks the Sign Up
button you will use axios
to make a POST
request to /users
.
If the user successfully signs up then you will navigate the user to the Content
component.
Be sure to save the JWT token to AsyncStorage
.
SignIn:
This view will have two input fields and a button that says Sign In
.
The first input field will be for the email
.
The second input field will be for the password
.
When the user clicks the Sign In
button you will use axios
to make a POST
request to /signin
.
If you receive a valid JWT token then save it to AsyncStorage
and then navigate the user to Content
. (Example below)
Content:
This component will take the JWT token saved to AsyncStorage
and will put it on the header of a
POST
request to /users
. The header key is authorization
. (Example below)
Make this HTTP request from inside of componentDidMount
and run it whenever this component is rendered.
Once you receive back the list of users from the database then display them using a FlatList
component.
Note about JWTs: The API in this project uses JWTs to authenticate its clients. Upon successful authentication you will receive a token from the server. This token needs to be included on all subsequent requests to protected routes. The JWT will look like this:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ
Make sure that you save the JWT token to AsyncStorage
. You will then be able to access this token in the future even if you've closed the app. The token will also be available from any view in your application.
AsyncStorage.setItem('token', response.data.token).then(() => {
this.props.navigation.navigate('Content');
});
Later when you want to make an authenticated request to the API you will need to attach the previously saved JWT like this:
AsyncStorage.getItem('token').then((token) => { // retrieve the token from "localStorage"
axios.get('https://mobile-server-ii.herokuapp.com/users', {
headers: {
authorization: token, // attach the token as a header
}
}).then((response) => {
// Update state in here
});
});
Once you complete the basic requirements then work on covering edge cases. A good starting point would be to add
another password input to the SignUp
component. Notify the user if their second password doesn't match the first.
Replace the characters in the password input fields with dots.
Show the user an error message if the email they provide is already in the database.
If the user provides an incorrect email/password combo display an error message in the SignIn
component.
Note: Never tell a user that they entered an incorrect password, always say incorrect email or password.
This makes it so people can't figure out what emails you have in your database.
- [GET]
/users
Gets all users. Requires a headerauthorization
and a valid JWT. - [POST]
/users
Creates a user. Requires an object with two properties:email
andpassword
. Returns a JWT. - [POST]
/signin
Requires an object with two properties:email
andpassword
. Returns a JWT.
For this assignment you will be creating a todo list that will take advantage
of the API you used for the first portion of this project. Once the user has authenticated then you can make requests to the protected routes that control the todo
collection in the database.
Address: https://mobile-server-ii.herokuapp.com/
[POST] /users
- Requires an email
and password
property on the body.
Returns a JWT and the user's info. Creates a new user in the database.
[POST] /signin
- Requires an email
and password
property on the body.
Returns a JWT and the user's info.
[GET] /users
- Requires a JWT header called authorization
.
Returns an array of all users in the database. Useful for debugging.
[GET] /user
- Requires a JWT header called authorization
.
Returns the user that the JWT is associated with.
[POST] /todos
- Requires a JWT header called authorization
.
The body should have a text
property that is a String.
A new todo item will be added to the user's todos array that's associated with the JWT.
[PUT] /todos/:todoId
- Requires a JWT header called authorization
.
Toggles the specified todo object's completed
property to either true or false.
[DELETE] /todos/:todoId
- Requires a JWT header called authorization
.
Removes the specified todo object from the JWT's user's todo's array.
Refactor your application to use Redux.