ReasonReact login/authentication token example projects?

#1

I’ve been searching on GitHub the past few days for good examples of ReasonReact apps authenticating against a server API. It seems like it should be a very common pattern but ReasonML is still new and there is a relative lack of examples like this in the wild.

The most complete example I’ve found so far is the RealWorld app here: https://github.com/gothinkster/reasonml-realworld-example-app

It’s a few months old at this point (using RR 0.2.4, deprecated bs-director, lack of labeled params, etc) and hasn’t been RFCed by the ReasonML community yet to be an “official” RealWorld implementation. I was wondering if the pattern used in src/login.re (requesting token from server) and src/effects.re (saving it to localStorage using Dom.Storage) and src/jsonRequests.re (reading from localStorage on every subsequent request to add to authorization headers) is a good pattern.

Seems like it would work but a little concerned about security (XSS/CSRF/etc) and whether it is a good idiomatic way of doing it. Maybe the token should be stored to a cookie or saved in Reductive (all other non-userdata fetched locally/passing down props the recommended way) or have server-side sessions or something else. I’m thinking of using NextJS SSR which doesn’t allow localStorage and requires cookies anyway.

I’m trying to keep my frontend and backend (Elixir/Phoenix/Absinthe-GraphQL) strictly decoupled but I guess I could render the initial page (and maybe the login functionality) from server templates if necessary to set the cookie also. There are good examples on doing this with Vue/Nuxt https://nuxtjs.org/examples/auth-routes and React/Next https://github.com/zeit/next.js/tree/canary/examples/with-apollo-auth or https://github.com/iaincollins/nextjs-starter, https://github.com/iaincollins/next-auth, etc but I really want to use ReasonML instead!

Does anyone know of a better OSS example ReasonReact project I could study to implement server login / tokens?

Thanks!

#2

No replies but I’ve collected a few likes so wanted to share what I did…

You can find a number of ReasonReact projects in the wild on Github to study patterns… most SPAs just grab a token from the server and store it in local storage or standard cookie then resubmit on all requests so XSS is a concern as any JS running on your page can steal the token… If you control (or trust) all the JS on your page and make sure users can’t submit input which gets rendered as JS on your page then you could be OK.

I looked at NextJS next since it has a great starter example of using ReasonML (https://github.com/zeit/next.js/tree/canary/examples/with-reasonml) and also a good JS example of auth from Apollo/GraphQL (https://github.com/zeit/next.js/tree/canary/examples/with-apollo-auth). It is a pretty awesome project but you will need to use a “custom” node server (usually express) if you really want to set httpOnly cookies. There are a lot of examples out there like the very good iaincollins/next-auth package you can leverage.

In the end since I was very comfortable with Elixir/Phoenix and uncomfortable with Express I just decided to render the page template shell from Phoenix and use the built-in secure session and CSRF mitigation functionality through plugs. ReasonReact renders the whole <body> and all GraphQL requests automatically carry the secure session cookie with them so I can easily bring the current user into context and authenticate/authorize everything. I know it’s not completely decoupled like I wanted but it’s clean enough, works great, and allows me to make progress faster.

#3

Here is an example from @Enalmada: https://github.com/Enalmada/next-reason-boilerplate