Devise-OTP without jQuery
Ruby/Rails boasts a unique diversity of available libraries and gems, including several options for authentication such as Devise, omniauth, clearance, sorcery, rodauth, among others. While there are many options to choose from, I personally prefers Devise for its modularity and ease of use.
However, any modern application needs more than just an authentication system; you also want to ensure you build on permissions permissions (for authorization), 2FA, and a solid hash library for additional secure measures.
There are several 2fa libraries that you can integrate with Devise, such as devise-two-factor, devise-otp, devise-2fa, two_factor_authentication, among others. I honestly prefer Devise-OTP for its ease of use and adherence to RFC 6238 implementation using the ROTP gem.
However I did encounter an issue with Devise-OTP in that it still assumes applications using it are using Sprockets and jQuery, and the qrcode JS file it includes requires jQuery. While I still use jQuery regularly at work, I have moved to using StimulusJS for personal projects.
After attempting to use several npm packages (like node-qrcode) for generating the users 2fa QRcodes, I also found that 1Password had issues when scanning for a valid 2FA QR code; which could be a significant concern for many users. It is noted that the gem has a handy helper
otp_authenticator_token_image_google for generating QR codes using the Google Chart API, but generating QR codes with a third party like Google may not be the most security-conscious decision.
After some playing around I was able to find an alternative method to get the qrcodes genreted in the application and without requiring jQuery to be included.
First to modify devise-opts views I ran the generator so they would be in the app, rather than in the gem.
rails g devise_otp:views
Next I added the follow gems to my Gemfile and bundled
gem 'rotp' gem 'rqrcode'
In my users helper I added the following method to generate the users 2fa QRcode
def otp_rqr_image(otp_url) qr_code = RQRCode::QRCode .new(otp_url) .as_png(resize_exactly_to: 300) .to_data_url image_tag(qr_code) end
Now within the view files that the gem generated you should have
app/views/devise/otp_tokens/_token_secret.html.slim. This file is where the qrcode is generated for the user enabling 2fa for their account. I replaced the
otp_authenticator_token_image (jQuery based) method with
otp_rqr_image that we created earlier. You should now have a valid 2fa QRcode which is also scanable by 1Password and most of password managers or 2fa authenticators.