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!
Getting started and deploying a react app to a public URL
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.
Adding a Todo Component to the app
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
hasura_roles 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.
Adding a database to store our todos
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
user_id of type
Integer (this will the
hasura_id 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 (
hasura_id 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:
Adding data APIs to the todo app
Another nifty feature of the
API Console is the
The Final App
Putting all of this together, this is what our final app will look like.
Extending your app: Adding custom APIs
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 .
What about React Native ?
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!
I want to know more, where do I start ?
Check out our react guide:
Hasura Hub - hasura/hello-react
Git push a react app to an HTTPS domain with no configuration. This project is a create-react-app boilerplate for…hasura.io
or if you are looking for something specific to react native:
Hasura Hub - hasura/hello-react-native
A Hasura starter project with a react-native application that uses Hasura BAAS features. It also has a ready to deploy…hasura.io
Hasura gives you instant GraphQL APIs over any Postgres database without having to write any backend code.