I'm looking for a way to create a basic authentication for my react-native app. I couldn't find any good example for react-native app.
What would be the best approach for this?
Thanks.
When an app communicates with a HTTP API which enforces some form of authentication, the app typically follows these steps:
Based on the work flow defined above our app starts by displaying a login form, step 2 kicks in when the user taps the login button which dispatches the login
action creator below:
/// actions/user.js
export function login(username, password) {
return (dispatch) => {
// We use this to update the store state of `isLoggingIn`
// which can be used to display an activity indicator on the login
// view.
dispatch(loginRequest())
// Note: This base64 encode method only works in NodeJS, so use an
// implementation that works for your platform:
// `base64-js` for React Native,
// `btoa()` for browsers, etc...
const hash = new Buffer(`${username}:${password}`).toString('base64')
return fetch('https://httpbin.org/basic-auth/admin/secret', {
headers: {
'Authorization': `Basic ${hash}`
}
})
.then(response => response.json().then(json => ({ json, response })))
.then(({json, response}) => {
if (response.ok === false) {
return Promise.reject(json)
}
return json
})
.then(
data => {
// data = { authenticated: true, user: 'admin' }
// We pass the `authentication hash` down to the reducer so that it
// can be used in subsequent API requests.
dispatch(loginSuccess(hash, data.user))
},
(data) => dispatch(loginFailure(data.error || 'Log in failed'))
)
}
}
There's a lot of code in the function above, but take comfort in the fact that the majority of the code is sanitising the response and can be abstracted away.
The first thing we do is dispatch an action LOGIN_REQUEST
which updates our store and lets us know that the user isLoggingIn
.
dispatch(loginRequest())
We use this to display an activity indicator (spinning wheel, "Loading...", etc.), and to disable the log in button in our log in view.
Next we base64 encode the user's username and password for http basic auth, and pass it to the request's headers.
const hash = new Buffer(`${username}:${password}`).toString('base64')
return fetch('https://httpbin.org/basic-auth/admin/secret', {
headers: {
'Authorization': `Basic ${hash}`
}
/* ... */
If everything went well, we'll dispatch a LOGIN_SUCCESS
action, which results in us having an authentication hash
in our store, which we'll use in subsequent requests.
dispatch(loginSuccess(hash, data.user))
On the flip side, if something went wrong then we also want to let the user know:
dispatch(loginFailure(data.error || 'Log in failed')
The loginSuccess
, loginFailure
, and loginRequest
action creators are fairly generic and don't really warrant code samples. See: https://github.com/peterp/redux-http-basic-auth-example/blob/master/actions/user.js)
Our reducer is also typical:
/// reducers/user.js
function user(state = {
isLoggingIn: false,
isAuthenticated: false
}, action) {
switch(action.type) {
case LOGIN_REQUEST:
return {
isLoggingIn: true, // Show a loading indicator.
isAuthenticated: false
}
case LOGIN_FAILURE:
return {
isLoggingIn: false,
isAuthenticated: false,
error: action.error
}
case LOGIN_SUCCESS:
return {
isLoggingIn: false,
isAuthenticated: true, // Dismiss the login view.
hash: action.hash, // Used in subsequent API requests.
user: action.user
}
default:
return state
}
}
Now that we have an authentication hash in our store we can pass it into subsequent request's headers.
In our example below we're fetching a list of friends for our authenticated user:
/// actions/friends.js
export function fetchFriends() {
return (dispatch, getState) => {
dispatch(friendsRequest())
// Notice how we grab the hash from the store:
const hash = getState().user.hash
return fetch(`https://httpbin.org/get/friends/`, {
headers: {
'Authorization': `Basic ${hash}`
}
})
.then(response => response.json().then(json => ({ json, response })))
.then(({json, response}) => {
if (response.ok === false) {
return Promise.reject({response, json})
}
return json
})
.then(
data => {
// data = { friends: [ {}, {}, ... ] }
dispatch(friendsSuccess(data.friends))
},
({response, data}) => {
dispatch(friendsFailure(data.error))
// did our request fail because our auth credentials aren't working?
if (response.status == 401) {
dispatch(loginFailure(data.error))
}
}
)
}
}
You may find that most API requests typically dispatch the same 3 actions as above: API_REQUEST
, API_SUCCESS
, and API_FAILURE
, and as such the majority of the request/ response code can be pushed into Redux middleware.
We fetch the hash authentication token from the store and setup the request.
const hash = getState().user.hash
return fetch(`https://httpbin.org/get/friends/`, {
headers: {
'Authorization': `Basic ${hash}`
}
})
/* ... */
If the API response with a 401 status code then we've got to remove our hash from the store, and present the user with a log in view again.
if (response.status == 401) {
dispatch(loginFailure(data.error))
}
I've answered the question generically and only dealing with http-basic-auth.
I think that the concept may remain the same, you'll push the accessToken
and refreshToken
in the store, and extract it in subsequent requests.
If the request fails then you'll have to dispatch another action which updates the accessToken, and then recalls the original request.
I haven't seen too much by way of examples in this area, and think it's definitely something that needs more coverage. I've not yet implemented auth myself, else I'd point you to some code examples. But I can point you to a couple links I've collected that may help you in the right direction...
Regardless how you perform your auth, you'll need to securely store your access, refresh, and secret tokens. On iOS I believe you'd do that using keychain and for Android it looks like KeyStore is the way. You may find oblador/react-native-keychain helpful, though it doesn't yet support android it looks like it may support android soon.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With