Wouldn’t it be great if you could add authentication and a database to your react or react native app in a few minutes ? Moreover, imagine, deploying your react app to the cloud was as easy as pushing to a remote git repository.
Well, these are exactly the problems that Hasura solves. Hasura is a platform which gives you a backend and dev ops out-of-the-box.
This short blog post aims at showcasing the speed and power at which you can develop and deploy a fully functional react app using Hasura. We are going to be building a To-Do app from scratch with the following features:
- Todo UI: A simple todo UI to add, complete and delete todos.
- Authentication: Ability for users to login or signup into the app. This also involves having a UI that helps users authenticate themselves.
- Database: Persist each user’s todo into a database so that it is accessible across sessions.
- Public URL: This todo app should be accessible via a public URL served over HTTPS.
And all of this in just 20 minutes.
Let’s get started!
Hasura provides ready made boilerplates that you can use to get started quickly. Deploying on Hasura is literally like pushing to a remote git repository.
Where is my react code ?
Let’s take a look at where the react app’s code is.
Ok, we have a simple react app. We are now going to add some UI elements to the todo app. In the video below we are going to replace the
App Component with a
TodoComponent which has a basic UI to show an input box and a list of added todos.
Hasura provides out-of-the-box authentication APIs that you can use instantly in your apps. You are given an
API Console as well as an
API Explorer to play around with these APIs.
As you can see, every authenticated user has a
hasuraroles associated with them.
You can now build a UI for authentication and use these APIs to authenticate your user. Alternatively, you can also use Hasura’s Auth UI Kit and skip this whole Authentication UI building ordeal.
Let’s create a table
todo to store the todos from the users. The
todo table will have the following columns,
id of type
task of type
completed of type
userid of type
Integer (this will the
hasuraid that we get after login to identify the user).
You can start creating tables from the
Api Console by heading to the
By default, every table created only has
admin permissions. This means that only users with admin roles can perform any sort of operations on these tables. So let’s add permissions so that users with
user role can
delete rows from this table.
As mentioned earlier, every table created on Hasura comes with instant
Data APIs .
Let’s check out a simple insert query for the user we created above (
hasuraid has a value of 2).
Note: This insert works because the user’s
auth_token is added as a
Authorization header to the request.
Similarly, to select, update and delete rows:
Another nifty feature of the
API Console is the
Putting all of this together, this is what our final app will look like.
You now have a fully functional todo app. But most apps are not todo apps, most modern apps require custom APIs that have to do more than just perform graph queries on tables.
We need custom APIs to handle these cases. The
hello-react quickstart that we started with also has a simple
express server running on the
Make changes like adding different routes and deploy with a simple
git push .
We just built a backend and used that in our react app. The same can be used for a react native app as well. We have a neat react-native-auth-boilerplate too!
Check out our react guide:
or if you are looking for something specific to react native:
We have GraphQL support coming soon. Subscribe here to get notified!