Graphql-engine: Simple authentication (without provider) example?
Hi, I am a complete beginner, so please bear with me. I've created an application using Vue.js and Hasura (on Heroku), and have managed to implement basic queries and mutations. Now I also want to add the possibility for a user to sign up and log in / out.
I've read the documentation, and it seems quite complicated to me, and I don't really understand most of it. Do I really need to use something like Auth0 or Firebase Auth? Can I not handle this stuff in the Vue app itself? Is there an example of this anywhere?
Sorry if this isn't the correct place to ask this. I've been stuck with this problem a couple of days now, and learning all these new things is pretty overwhelming, and I haven't been able to find an answer to my questions elsewhere.
oletakethewheel
All 5 comments
Welcome @oletakethewheel! Setting up auth might seem complex, but once you set it up for the first time everything is quite easy :)
We can guide you through the process of adding auth. Feel free to join us on our discord at: https://discord.gg/hasura where we have a channel for folks new to building apps/graphql etc.
Roughly, these are the steps for adding auth:
- The UI for login/logout is on the vue app
- The APIs that actually do the password check, create a user and so on are authentication APIs. You can build your own APIs for doing this or use auth0 / firebase. I would recommend using one of the 2.
- Once you integrate, say auth0 with your vue app, you'll have a working UI with a legitimate backend that can register, login, logout users. Here are some useful guides for working with vuejs / auth0
- All of the steps above are independent of Hasura. The next step is ensure that logged in users can only query/mutate/subscribe to data they own
- For doing this, configure permission rules on Hasura: https://docs.hasura.io/1.0/graphql/manual/auth/authorization/basics.html. These rules tell Hasura about the data ownership or users.
- Next, whenever your app makes graphql queries to Hasura, your app should send the id_token you previously received from auth0 when you logged in or signed up as an HTTP header. Configure your apollo client to use this HTTP header
- Now, Hasura is receiving graphql queries with auth tokens and also knows how to apply permissions to graphql queries to ensure secure access. The last piece is to configure Hasura to be able to extract user information from the token to apply it in the permissions rule. For example, the permission rule says, allow a user to select profile data if profile.user_id = logged-in-user-id.
- To do this last piece, you need to configure hasura to use the same configuration that auth0 has
I would recommend following an auth0 tutorial and first getting basic auth working in your vue app. Once you have that feel free to ask us questions on our discord so that you get help you with the rest of the steps! Please don't worry about asking questions as a beginner, everyone's super friendly :)
Also, @vnovick is going to release a vuejs + hasura tutorial in a few days that will cover all of these issues and more so definitely watch out for that.
coco98
on 13 Mar 2019
Thanks for the response @coco98!
The APIs that actually do the password check, create a user and so on are authentication APIs. You can build your own APIs for doing this or use auth0 / firebase. I would recommend using one of the 2.
I am mainly wanting to learn how to build my own API for doing this (using a provider seems overkill imo), which is the problem, as I don't really understand how to do this. I guess I can set it up with auth0 first and see if I want to change it afterwards or not.
Anyway, I will be looking forward to the tutorial and will join the Discord soon!
oletakethewheel
on 13 Mar 2019
I'm also interested in this @coco98 and was wondering when and where @vnovick's tutorial will be released?
amosbastian
on 17 Mar 2019
Guys you can slso use this repo:
https://github.com/elitan/hasura-backend-plus
mnlbox
on 17 Mar 2019
I everyone 馃憢 just in case you haven't found @vnovick's Vue + Hasura tutorial yet, here it is: https://dev.to/hasurahq/vue-and-graphql-with-hasura-video-course-3mpp. I'm closing this issue now. Feel free to re-open should you have any more questions 馃檪
marionschleifer
on 10 Jul 2019
Related issues
macalinao
路
3Comments
sachaarbonel
路
3Comments
rikinsk-zz
路
3Comments
hooopo
路
3Comments
marionschleifer
路
3Comments
Most helpful comment
Welcome @oletakethewheel! Setting up auth might seem complex, but once you set it up for the first time everything is quite easy :)
We can guide you through the process of adding auth. Feel free to join us on our discord at: https://discord.gg/hasura where we have a channel for folks new to building apps/graphql etc.
Roughly, these are the steps for adding auth:
I would recommend following an auth0 tutorial and first getting basic auth working in your vue app. Once you have that feel free to ask us questions on our discord so that you get help you with the rest of the steps! Please don't worry about asking questions as a beginner, everyone's super friendly :)
Also, @vnovick is going to release a vuejs + hasura tutorial in a few days that will cover all of these issues and more so definitely watch out for that.