6
10 Comments

Authentication With Vue/Electron Application

I'm building an application with Vue and Electron, and I'm wondering what the best approach is for authenticating users.

I'm using JSStore as a wrapper for IndexedDB as my database. I'm familiar with using bcryptjs as a means for authenticating users when I create Node backend and have traditional /login or /signup routes.

But this is where I'm starting to get confused. Do I need to set up a Node server to start up when my application starts up? Because given that I'm using IndexedDB, I don't know that it makes sense to have a process of:
Sign Up --> Request to Node Server --> Send data back to browser

Would I be better served using a different type of database? Could I do something such as adding bcryptjs to the Vue prototype, so that's it's accessible where I need it to work with JSStore? Are there security concerns that I should be aware of with an approach like that?

At this point I'm stuck, and have more questions than answers. I've done some looking around for articles, and I find a lot of content about setting up authentication with Vue, but not within the context of an Electron application. I'm not sure how that variable changes things.

Any advice or direction would be greatly appreciated.

  1. 3

    You should look into a comparison of Auth SaaS solutions

    There are many of these, and if you are getting stuck at this stage, then likely this is going to become a huge risk for your users.

    If you want answers, I suggest, just try explicitly asking those questions you have. There are lots of knowledge bases sitting around. Stack overflow, Programmer's Hangout on Discord, Indie Hackers where you ask these questions.

    You vue application should be running as a static site, which means it is "always on". This is client side UI (and it could be a electron app, android app, or website). This needs to connect to a service running under your control, likely in a cloud. This service is what connects to the DB. The client NEVER connects directly to the DB, this is not secure.

    The type of database you want to use is directly dependent on the type of data and queries you need to make.

  2. 3

    TLDR; You still need a server for authentication.

    Authentication logic should always happen on a server. You can never trust a client.

    With that said, Electron is just another client. At a high level it's just another front end no different than any other website or app.

    If you want to avoid standing up your own server for this look at using something like Firebase Auth which takes care of this for you and you only need to handle the client side portion of your authentication flows.

    1. 1

      Thank you for getting back to me so quickly. That's good to know. I could set up a Node server like I typically would, just outside of my src directory. Would it still make sense to use JSStore as a database solution? Or do I need to set up a SQLite3 DB?

      At this point in time I was just going to have the application fetch and display pricing data for stocks and cryptocurrencies. And maybe enable account interactions like placing orders. So I don't think I need to store anything other than data specific to the user (API Keys, Watch Lists, etc)

      My thought is that I might be okay with IndexedDB/JSStore, but I'd appreciate a second opinion.

      1. 1

        It's hard to advise without understanding the full scope of your application and what you're looking to accomplish.

        I went back and read your OP and noticed that you mentioned starting a Node server w/ your app. I should note that your Node server will not be running on the user's machine. You would have your back end deployed somewhere. AWS, DO, GCP, there's a million and one options for that. It would remain running / available.

        When a user starts your Electron app that they've downloaded to their computer, it would communicate w/ your server to handle authentication. This is classic client-server architecture.

        If your app is fetching data from 3rd party API's you'll need to do this through your server as well. The reason for this is that those 3rd party API's will likely require authentication and will provide you with some sort of API key to authenticate yourself (as in your server) with. You do not want to have that key exist on any of your user's clients as they could then use the key to make requests directly to the third-party (outside the scope of your application) while you foot the bill for it.

        As for storing the user specific information, you'll need something beyond IndexedDB. The reason for this is that IndexedDB is a client-side data store. This means that the data stored in it is only available on that client. What happens if your user installs your app on two different computers? Even though they signed in on both, you would have difficulties accessing their watch lists and user data that you stored in IndexedDB on their first computer as you have no centralized storage mechanism. SQLite is traditionally used in client applications as well. I would suggest a proper client-server database engine such as PostgreSQL which your server is connected to for persisting your app's data.

  3. 2

    You will need a server, you should never have hashes or any kind of authentication logic on the client-side. It's too easily manipulated.

  4. 1

    Hey! Curious to know which solution you went with?

    I've never built an auth feature from scratch before. I usually outsource to companies who specializes in auth. I do agree with everyone on needing to set up a server for the auth logic, as well as to save any secret keys.

    Full disclosure, I work at Magic and we provide a passwordless SDK that's really easy to integrate with either Vue or Electron. If you're interested, here are our guides:

    1. 2

      I actually ended up putting together a Node backend to use for authentication. But thank you for the Magic info! I've seen that feature on Slack, and in other places and I think it's neat. Will certainly be checking that out.

      1. 1

        Yay, glad you were able to set up auth! Would love to see how it looks. Was there a specific tutorial you followed?

        1. 1

          Not for setting up the backend. I have code for a Node/Express backend that I adapt for my needs depending on the project.

          I did use this as a guide for the Vue part of it: https://pusher.com/tutorials/authentication-vue-vuex#set-up-components-for-the-application

          But I converted the store actions to async/await.

  5. 1

    I am building a Vue and electron app as well, for authentication I am planning on using Firebase. It will let me easily handle authentication and check if they have a valid subscription.
    Firebase is either free or cost very little. Hard to get off though if you want to change.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 29 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 16 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments