Forem: Pete Hawkins

Creating your first VIEW_COMPONENT with Rails and Hotwire

Pete Hawkins — Fri, 10 Jun 2022 14:50:37 +0000

In the following video I'll show you how easy it is to start using view_component with your Rails app.

I highly recommend it to help create extremely reusable views and keep your UI neat and tidy.

6 Tips for Recording Screencasts Like a Pro

Pete Hawkins — Mon, 09 May 2022 19:38:24 +0000

When I decided to start making screencasts I couldn't find great information on how to go about it and what software to use.

Here are 6 of the most important tips to get started creating screencasts.

Most of my examples show how to record your screen on Mac OS, but the general tips should apply no matter what platform you are using.

Screencast: Testing GraphQL with Rails and RSpec

Pete Hawkins — Fri, 29 Apr 2022 16:38:32 +0000

In this video we start writing some automated tests using RSpec to cover the GraphQL mutations and queries we built in the previous video.

Screencast: Setting up a GraphQL server in Rails

Pete Hawkins — Fri, 22 Apr 2022 14:02:32 +0000

In this video I'm going to walk you through setting up a GraphQL server in Ruby on Rails.

We will install the graphql gem
Generate some graphql types for our model
Create mutations for login/register
Create a query for fetching info about the current user

Why I open sourced my startup

Pete Hawkins — Sat, 30 Oct 2021 21:17:41 +0000

Happi is now open-source. The entire codebase is freely available for anyone to self-host, contribute to or just read through to see how it all works.

As a developer who relys on open-source projects to make a living, I’ve always liked the idea of having an open core product and have been inspired lately seeing a few others doing this really well, such as Plausible analytics - a privacy focused Google Analytics alternative.

Why?

There are several reasons for doing this that I would like to touch on, but first, it’s not to get contributions. I doubt I’ll get many serious contributions to the product and I don’t really want to spend much time code reviewing pull requests, I’d rather spend time shipping improvements myself.

So why am I doing this?

It’s pretty easy to build trust and accountability when your code is public. As a boostrapped product, some may have concerns about the product no longer being maintained. With a public codebase, they can choose to self host later down the line, or have the community fork and take over the product.
I want to provide a secure and privacy focussed application, what better way to do it than to have the code available for all to see. I want to take a deliberate stand against Surveillance capitalism.
Some people will prefer to self-host Happi, having full control of their own data and running it on their own infrastructure, and I’d like to support that.
Lastly, I don’t think there are a huge amount of open-source Hotwire applications like this out there and with the screencasts I‘m making it would be great to be able to link to commits or source code directly.

How will this affect the business?

Some might have concerns that open-sourcing their application and allowing people to self-host will seriously harm their business model.

I have zero concerns about this, in fact I pay for plenty of software that’s available to self-host for free myself.

Self-hosting is far more expensive than just paying the monthly subscription for the cloud version. I value my time, and if I have to SSH into servers and start fixing things or running upgrades, I‘ve already lost more money than the price of a cloud based solution.

The other thing is, not all users are technical, and I’ve made Happi super easy to use, so non-developers can easily sign up and use the cloud based version.

Which license works best?

From following Plausible along the way, they have had some issues with corporations taking their MIT licensed app and trying to closed-source it and resell it, without giving back to the open-source project. This may seem like copyright infringment, but if you license your application under MIT, this is usually allowed.

For this reason, I’ve copied Plausible and licensed as AGPL. This license prevents modifications, without them also being open sourced and available to contribute back to the main source. There shouldn’t be any issues with GPL like there would be with a library, because Happi isn’t going to be included into anyone else web app.

The only exception to this, is that the embedable support widget is using the MIT license, as it will be included as an npm package into other peoples codebases, so we don’t want any GPL issues here.

Hopefully this turns out to be a good decision in the long run. If you have any questions or thoughts please drop a comment.

Apple M1 Pro for Ruby development

Pete Hawkins — Fri, 29 Oct 2021 08:41:41 +0000

I was lucky enough to get my 14" M1 Pro MacBook this week.

Prior to ordering, I had some concerns about web development on Apple Silicon and wanted to share my experience so far.

TLDR; Everything works with only very minor issues. I was able to install everything natively on the arm chip, I did not need Rosetta for compatibility.

Ruby

Following the GoRails guide for Monterey using rbenv, everything installed with no problems.

The only thing I noticed was that Homebrew now seems to install to /opt/homebrew instead of /usr/local/homebrew, although that might just be a later version of Homebrew, rather than an Apple Silicon specific thing.

Node.js

With Homebrew and Ruby set up, the next thing I needed was Node. I used node version manager and installed node v14 and v17 without issues.

Heroku CLI

This was where the first issues started. Heroku’s CLI is recommended to be installed using Homebrew, which throws a bunch of issues about x86 incompatibility.

The workaround I found, which I couldn’t find documented anywhere was to install Heroku CLI using npm.

npm i -g heroku

The only problem here, is that with NVM, you will need to install Heroku on each node instance you plan to use, so it’s always available inside your projects.

Rosetta / compatibility

I was surprised that I didn’t need Rosetta installed, for the most part all the major apps I used, including Hyper (for terminal) and VS Code have Apple Silicon support.

I found a couple of smaller apps like ImageOptim don’t yet have support for arm, and rather than installing Rosetta, I’ve just not installed that yet, I’m sure I will be able to find a workaround if I need to compress images.

Compared to my old 16" Pro

I was previously using a 16" MacBook Pro with an intel i9 CPU, the biggest problem I had with that laptop was the heat and fan noise.

Even screen recording, or taking a video call would max out the fans and cause the laptop to get extremely hot.

I’m very pleased to say the M1 Pro doesn’t have this issue, I haven’t heard the fans ramp up once, and that includes when compiling Ruby – which is awesome!

It also doesn’t get very warm when using it on your knee which I also like.

Performance and conclusion

Finally, the performance is immense! For reference I purchased the higher standard config of the 14", so it has the 10 core CPU, 16 core GPU and 16GB of unified memory (I picked a standard config as I wanted to get it on day 1).

Compiling Ruby and Node happened really quickly and I’ve been very pleased with everything so far! My favourite ever laptop was the 13" MacBook Air (from 2011 I think?!), since then I’ve always had the 15" or 16" laptops, and I’m very pleased to be able to get a high performance chip in the smaller form factor again.

7 Ruby Standard libraries you should get to grips with

Pete Hawkins — Fri, 22 Oct 2021 13:10:46 +0000

Ruby has a lot of useful things in its Standard Library.

Learning what’s included and how to use it can be very helpful, especially when writing small scripts where you don’t want to pull in bundler and start making a Gemfile etc.

These libraries are robust, maintained by the core team and should be extremely reliable, and outlive most Ruby gems you come across.

1. Net/HTTP and open-uri

I wanted to start with something I need in most applications I build, and that’s the ability to perform an HTTP request.

In the past I have opted to use the HTTP.rb gem, but for simple tasks it’s really useful to learn Net/http or even open-uri for simple GET requests.

require "net/http"
require "json"

# Net/HTTP GET request
uri = URI("https://swapi.dev/api/films/1/")
resp = Net::HTTP.get(uri)
json = JSON.parse(resp)
puts json["title"] # => "A New Hope"

# Net/HTTP POST request
uri = URI("https://example.org/users")
params = {
  "name" => "Bob",
  "email" => "bob@example.org",
}
res = Net::HTTP.post_form(uri, params)
puts res.body

# Net/HTTP Full form: delete/put/patch requests
uri = URI("http://example.org/some_path")

Net::HTTP.start(uri.host, uri.port) do |http|
  request = Net::HTTP::Delete.new uri
  # or request = Net::HTTP::Patch.new uri
  # or request = Net::HTTP::Put.new uri

  response = http.request(request) # Net::HTTPResponse object
  puts response.body
end

Things are even simpler with open-uri if you only need a GET request:

require "open-uri"
require "json"

URI.open("https://swapi.dev/api/films/1/") do |io|
  json = JSON.parse(io.read)
  puts json["title"] # => "A New Hope"
end

# or
uri = URI("https://swapi.dev/api/films/1/")
puts uri.open.read

2. CSV

When I’m creating an admin section, I often need to export some form of reports to measure how an application is performing. Ruby has this built in and to take some data and place it into a CSV is pretty simple.

require "csv"

module CustomerExport
  module_function

  def generate(customers)
    CSV.generate do |csv|
      # Define the headers
      csv << %w[id name email country_code created_at updated_at]

      # Add a new row for each customer record
      customers.each do |customer|
        csv <<
          [
            customer.id,
            customer.name,
            customer.email,
            customer.country_code,
            customer.created_at,
            customer.updated_at
          ]
      end
    end
  end
end

CustomerExport.generate(Customer.all)

And if you wanted to make a Rails route to download this...

module Admin
  class ExportsController < AdminBaseController
    def customers
      customers = Customer.all
      respond_to do |format|
        format.csv do
          filename = "customers-#{Time.zone.now.strftime("%Y-%m-%d")}"
          filename += ".csv"
          headers["Content-Type"] ||= "text/csv"
          headers["Content-Disposition"] =
            "attachment; filename=\"#{filename}\""
          render plain: CustomerExport.generate(customers)
        end
      end
    rescue => e
      flash[:error] = "Failed to generate export: #{e.message}"
      redirect_to admin_path
    end
  end
end

Parsing CSVs (for example: importing CSV files from users) is also built in and you can read the documentation for more on that.

3. SimpleDelegator

I like to use SimpleDelegator to add extra behaviour to ActiveRecord objects, such as having Stripe specific code wrapped up into StripeWrappedUser or something similar, this avoids placing lots of methods on your ActiveRecord object, but can then augment that class with extra functionality.

require "delegate"
require "digest"

class User < Struct.new(:id, :email)
end

class BillingUser < SimpleDelegator
  def billing_system_id
    Digest::SHA1.hexdigest(id.to_s + email)
  end
end

bob = User.new(1, "bob@example.com")
bob = BillingUser.new(bob)
puts bob.email # => bob@example.com
puts bob.billing_system_id # => 186da93f0b39990e034a80cc4b45c8ec253f2a1a

4. Struct and OpenStruct

Struct is included in Ruby core, it doesn’t need required, and is the stricter of the two objects, and also much more performant.

I find it particularly useful for two things:

As a value object, giving a name to some piece of data, that would otherwise be a Hash.
In tests to create mock objects that can be passed in to represent fake things, like a FakeUser.

User = Struct.new(:id, :email)
alice = User.new(1, "alice@example.org")
puts alice.id # => 1
puts alice.email # => alice@example.org

# Can also be defined with additional methods
class User < Struct.new(:id, :email)
  def send_welcome_email
    UserMailer.welcome(self).deliver_later
  end
end

OpenStruct meanwhile is a lot more flexible and can be a neat wrapper for a Hash or JSON from an API etc.

require "ostruct"

data = OpenStruct.new(id: 5, name: "Jeffrey")

# New attributes can be set at runtime:
data.email = "jeff@example.org"

puts data.id # => 5
puts data.name # => "Jeffrey"
puts data.email # => "jeff@example.org"

5. PStore

PStore is a really simple key-value datastore and can be helpful when you need somewhere to store data in a non-production system (i.e. this is not a good replacement for ActiveRecord).

require "pstore"

store = PStore.new("my_db.pstore")

# Write some data
store.transaction do
  store["person-1"] = { name: "Bob", email: "bob@example.org" }
end

# Read some data
store.transaction(true) do
  puts store["person-1"] # => {:name=>"Bob", :email=>"bob@example.org"}
end

6. Minitest

When working on smaller scripts, I like to pull in a test framework and make some assertions while test-driving some code.

I usually prefer RSpec when working with Rails, but it’s more effort to set up than Minitest, which comes included with Ruby.

The nice thing about Minitest, it is just Ruby – there’s nothing magical going on and it’s very easy to understand.

require "minitest/test"
require "minitest/autorun"

class APIResponse < Struct.new(:body, :error)
  def success?
    error.nil?
  end
end

class APIResponseTest < Minitest::Test
  def test_successful_responses
    resp = APIResponse.new("Well done!", nil)
    assert resp.success?
  end

  def test_error_responses
    resp = APIResponse.new(nil, StandardError.new("400 bad request"))
    refute resp.success?
  end
end

# Running:
# ..
# Finished in 0.000957s, 2089.8640 runs/s, 2089.8640 assertions/s.
# 2 runs, 2 assertions, 0 failures, 0 errors, 0 skips

7. Logger

Using logger can clean up a lot of your debug output when writing a script and you can then control the log level to show more/less output. Note: Use Rails.logger in Rails.

require "logger"

logger = Logger.new(STDOUT)

# Setting :warn will only show warning, error and fatal.
logger.level = :warn

# Can tweak log output to be less verbose
logger.formatter = proc do |severity, datetime, progname, msg|
  "#{severity[0...1]} #{datetime.strftime('%H:%M %b %d %Y')}: #{msg}\n"
end

logger.debug("Created logger") # wont be displayed in current log level
logger.info("Program started") # wont be displayed in current log level
logger.warn("Nothing to do!")
logger.error("Something really bad!")

# =>
# W 14:56 Oct 22 2021: Nothing to do!
# E 14:56 Oct 22 2021: Something really bad!

There’s plenty more in the Ruby Standard Library to get familiar with, but these 7 are things I come back to, time and time again.

Hotwire: best practices for stimulus

Pete Hawkins — Fri, 15 Oct 2021 19:19:19 +0000

From my experience building several production apps with Hotwire, Turbo frames and Turbo streams handle the bulk of things you need to build an interactive web application.

You will however, definitely need a little JavaScript sprinkles from Stimulus.

I want to run through all of the stimulus controllers included in Happi and talk about some ‘Best Practices’ from what I have learnt so far.

The first controller you’ll write

In every Hotwire app I’ve built so far, the first controller I end up needing is ToggleController. This is usually when I set up my Tailwind UI layout and need to start hiding and showing nav menus.

ToggleController

As you’ll see below, I am importing useClickOutside from stimulus-use, it’s a great library with small, composable helpers, I urge you to check it out!

The other thing I like to do here is leave some usage comments, it makes it a lot easier to peep into the controller and see how things work and what data attributes I need to add to my HTML.

import { Controller } from "@hotwired/stimulus";
import { useClickOutside } from "stimulus-use";

/*
 * Usage
 * =====
 *
 * add data-controller="toggle" to common ancestor
 *
 * Action (add this to your button):
 * data-action="toggle#toggle"
 *
 * Targets (add this to the item to be shown/hidden):
 * data-toggle-target="toggleable" data-css-class="class-to-toggle"
 *
 */
export default class extends Controller {
  static targets = ["toggleable"];

  connect() {
    // Any clicks outside the controller’s element can 
    // be setup to either add a 'hidden' class or 
    // remove a 'open' class etc.
    useClickOutside(this);
  }

  toggle(e) {
    e.preventDefault();

    this.toggleableTargets.forEach((target) => {
      target.classList.toggle(target.dataset.cssClass);
    });
  }

  clickOutside(event) {
    if (this.data.get("clickOutside") === "add") {
      this.toggleableTargets.forEach((target) => {
        target.classList.add(target.dataset.cssClass);
      });
    } else if (this.data.get("clickOutside") === "remove") {
      this.toggleableTargets.forEach((target) => {
        target.classList.remove(target.dataset.cssClass);
      });
    }
  }
}

The biggest thing I can stress is to make your controllers as generic as possible. I could have made this controller NavbarController and then it would only toggle a navbar. Because this is generic, I have reached for it so many times in my app and been able to reuse it.

AutoSubmitController

import { Controller } from "@hotwired/stimulus";
import Rails from "@rails/ujs";

/*
 * Usage
 * =====
 *
 * add data-controller="auto-submit" to your <form> element
 *
 * Action (add this to a <select> field):
 * data-action="change->auto-submit#submit"
 *
 */
export default class extends Controller {
  submit() {
    Rails.fire(this.element, "submit");
  }
}

This one is tiny, I needed it to auto submit a form when these dropdowns are changed, to go ahead and save changes. Again, I’ve kept it generic, so it could be reused in other places that require similar behaviour.

DisplayEmptyController

This one is super handy, it allows the empty state to work properly with Turbo Streams. Without it, when Turbo streams push new messages onto the screen, the UI showing ‘You don’t have any messages’ would still be visible and everything would look broken.

It also relies on stimulus-use’s useMutation hook, which means it just works^tm with Turbo streams and we don’t need any complex callbacks and still don’t need to reach for custom ActionCable messages.

import { Controller } from "@hotwired/stimulus";
import { useMutation } from "stimulus-use";

/*
 * Usage
 * =====
 *
 * add data-controller="display-empty" to common ancestor
 *
 * Classes:
 * data-display-empty-hide-class="hidden"
 *
 * Targets:
 * data-display-empty-target="emptyMessage"
 * data-display-empty-target="list"
 *
 */
export default class extends Controller {
  static targets = ["list", "emptyMessage"];
  static classes = ["hide"];

  connect() {
    useMutation(this, {
      element: this.listTarget,
      childList: true,
    });
  }

  mutate(entries) {
    for (const mutation of entries) {
      if (mutation.type === "childList") {
        if (this.listTarget.children.length > 0) {
          // hide empty state
          this.emptyMessageTarget.classList.add(this.hideClass);
        } else {
          // show empty state
          this.emptyMessageTarget.classList.remove(this.hideClass);
        }
      }
    }
  }
}

FlashController

This one’s not as generic as I would like, maybe I should call is AutoHideController? It’s pretty straightforward, automatically hide after 3 seconds, but can also be dismissed by clicking the 'X'.

import { Controller } from "@hotwired/stimulus";

/*
 * Usage
 * =====
 *
 * add data-controller="flash" to flash container
 * p.s. you probably also want data-turbo-cache="false"
 *
 * Action (for close cross):
 * data-action="click->flash#dismiss"
 *
 */
export default class extends Controller {
  connect() {
    setTimeout(() => {
      this.hideAlert();
    }, 3000);
  }

  dismiss(event) {
    event.preventDefault();
    event.stopPropagation();

    this.hideAlert();
  }

  hideAlert() {
    this.element.style.display = "none";
  }
}

HovercardController

This one loads in a hovercard, similar to hovering a users avatar on Twitter or GitHub. I originally got this code from Boring Rails, it’s a great resource for all things Rails/stimulus/Hotwire, you should definitely check it out!

Note: If you are planning on using this, bonus points for making it more configurable and using Stimulus CSS classes for the hidden class.

It might also be smart to use the new Rails Request.js library rather than directly using fetch.

import { Controller } from "@hotwired/stimulus";

/*
 * Usage
 * =====
 *
 * add the following to the hoverable area
 * data-controller="hovercard"
 * data-hovercard-url-value="some-url" # Also make sure to `render layout: false`
 * data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
 *
 * Targets (add to your hovercard that gets loaded in):
 * data-hovercard-target="card"
 *
 */
export default class extends Controller {
  static targets = ["card"];
  static values = { url: String };

  show() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.remove("hidden");
    } else {
      fetch(this.urlValue)
        .then((r) => r.text())
        .then((html) => {
          const fragment = document
            .createRange()
            .createContextualFragment(html);

          this.element.appendChild(fragment);
        });
    }
  }

  hide() {
    if (this.hasCardTarget) {
      this.cardTarget.classList.add("hidden");
    }
  }

  disconnect() {
    if (this.hasCardTarget) {
      this.cardTarget.remove();
    }
  }
}

MessageComposerController

This controller is really the only app-specific stimulus controller I’ve written so far, which is pretty remarkable, considering I’ve built a full production quality app, with just a handful of lines of JS, this really shows the power of Hotwire and Turbo.

Happi has canned responses, which help you automate writing common messages. When you click a canned response, this will take its HTML and push it into the action text trix editor.

import { Controller } from "@hotwired/stimulus";

/*
 * Usage
 * =====
 *
 * add this to the messages form:
 * data-controller="message-composer"
 *
 * Action (add this to your snippets):
 * data-action="click->message-composer#snippet" data-html="content..."
 *
 */
export default class extends Controller {
  connect() {
    this.editor = this.element.querySelector("trix-editor").editor;
  }

  snippet(event) {
    this.editor.setSelectedRange([0, 0]);
    this.editor.insertHTML(event.target.dataset.html);
  }
}

NavigationSelectController

Another simple one here, used for responsive navigation on mobile via a select menu.

This is used within the settings page, on large screens, we have tabs down the side and on mobile collapse these into a dropdown that when changed, navigates to another sub-page within settings.

import { Controller } from "@hotwired/stimulus";
import { Turbo } from "@hotwired/turbo-rails";

/*
 * Usage
 * =====
 *
 * add data-controller="navigation-select" to common ancestor
 *
 * Action:
 * data-action="change->navigation-select#change"
 *
 */
export default class extends Controller {
  change(event) {
    const url = event.target.value;
    Turbo.visit(url);
  }
}

SlugifyController

This ones used when creating a team on Happi. You have to pick a custom email address that ends in @prioritysupport.net, to make the UX a bit nicer we want to pre-fill this input with your company name.

import ApplicationController from "./application_controller";

/*
 * Usage
 * =====
 *
 * add data-controller="slugify" to common ancestor or form tag
 *
 * Action (add to the title input):
 * data-action="slugify#change"
 *
 * Target (add to the slug input):
 * data-slugify-target="slugField"
 *
 */
export default class extends ApplicationController {
  static targets = ["slugField"];

  change(event) {
    const { value } = event.target;
    this.slugFieldTarget.value = value.toLowerCase().replace(/[^a-z0-9]/, "");
  }
}

That’s it!

Yep, a full application with a rich user-interface, live updates with websockets and only 8 JavaScript files to maintain!

What’s even better here, is that 7 of the 8 stimulus controllers can be copied and pasted into other apps, I use a lot of these across different projects.

How to get the most out of Hotwire?

As you can probably tell from all my controllers shown above, my number 1 tip is to keep things generic, try to glean the reusable behaviour when you need functionality, rather than creating specific controllers for specific parts of your application.

Other than that, try to rely on Turbo frames or streams to do the heavy lifting, you should really be avoiding writing stimulus controllers unless absolutely necessary, you can do a lot more with Turbo than you might think.

Finally, check out Better stimulus and Boring Rails for a lot of actionable tips and tricks!

RSpec: request specs vs feature specs

Pete Hawkins — Wed, 13 Oct 2021 11:33:58 +0000

In this screencast I introduce a rather small feature to Happi, setting the reply-to address for new threads.

The main point of it is to cover writing request specs that give me confidence my code is working and I also explore and write a feature spec and give some thoughts as to why I wouldn’t normally write an end-to-end test for this type of product feature.

You can find a higher quality version on Youtube, please subscribe there if you like the content.

P.s. I got a new microphone and am still trying to figure out how to use it properly, so apologies for any breathing or weird noises :)

Password-less auth in Rails

Pete Hawkins — Wed, 06 Oct 2021 22:19:42 +0000

One of the weakest points in your system can easily be end users credentials. It’s easy to forget that most people don’t enable 2FA, use a password manager or even have a reasonable length of password to begin with.

Instead of mandating that passwords should be a certain length and have 3 special characters, what if we just removed the need for passwords entirely?

In this tutorial I’ll show you exactly how I have accomplished password-less accounts in Rails, using one-time passcodes and email.

How does it work?

The basic flow for logins is as follows:

The user types their email address
A one-time password is emailed to them
Typing the OTP into the browser then logs them in

For signups this differs slightly. When you submit an email that has no account, the page will reload and ask you for a first and last name, then submitting the form will create your account and send you a OTP to login with.

Benefits

No longer worrying about password security
Users can’t have insecure or weak passwords, because they don’t have a password to begin with! There is also no need for password resets, changing passwords and all the notifications and emails that go along with them.

Emails are verified as standard
No need to verify your email address, If a user gets the code and types it in, their email is verified.
For Nine we wanted to make sure potential customers emails are verified before creating orders and sending them to Stripe checkout.

Signup flow is much faster
Without needing to fill in a password and a password confirmation, the account creation form can be drastically simplified. This is much better UX, especially where commerce is concerned.

Why not use a third-party service?

There are plenty of third part auth services out there, magic.link being the one I have seen get the most attention.

For my personal experience, I never like relying on third parties for such a crucial part of my system.

I know, I know, rolling your own auth is a terrible idea and if I where building a password system I would use a library like Devise. If anyone has any security concerns or thoughts on my approach please reply and let me know, I would love to discuss it further!

Building it

For those interested, I’ll show you all the relevant code, if you have further questions please ask in the comments.

Dependencies

To rely on secure OTPs we need a couple of dependencies in our Gemfile:



# One time passwords
gem "rotp"
gem "base32"

`app/models/user.rb`

Your user should have the following database fields at a minimum.



create_table :users do |t|
  t.string "email", null: false
  t.string "first_name", null: false
  t.string "last_name", null: false
  t.string "auth_secret", null: false
  t.datetime "created_at", null: false
  t.datetime "updated_at", null: false
end
add_index(:users, :email, unique: true)

Next up, we need to add a few methods to the User model for generating and verifying OTPs.



class User < ApplicationRecord
  before_create :generate_auth_secret

  validates :email, email: true, presence: true
  validates :first_name, :last_name, presence: true

  def self.generate_auth_salt
    ROTP::Base32.random(16)
  end

  def auth_code(salt)
    totp(salt).now
  end

  def valid_auth_code?(salt, code)
    # 5mins validity
    totp(salt).verify(code, drift_behind: 300).present?
  end

  private

  # This is used as a secret for this user to 
  # generate their OTPs, keep it private.
  def generate_auth_secret
    self.auth_secret = ROTP::Base32.random(16)
  end

  def totp(salt)
    ROTP::TOTP.new(auth_secret + salt, issuer: "YourAppName")
  end
end

Note the salt is stored in a cookie and ensures the user can only login from the same web browser that they requested the login from. This means that if someone looked over their shoulder and got their auth code, they couldn’t login on a different web browser.

UserLogin service

This service handles the business logic for dealing with requesting a code and verifying it was correct and it will keep our controllers tidy.



module UserLogin
  module_function

  # Called when a user first types their email address
  # requesting to login or sign up.
  def start_auth(params)
    # Generate the salt for this login, it will later 
    # be stored in rails session.
    salt = User.generate_auth_salt
    user = User.find_by(email: params.fetch(:email).downcase.strip)
    if user.nil?
      # User is registering a new account
      user = User.create!(params)
    end

    # Email the user their 6 digit code
    AuthMailer.auth_code(user, user.auth_code(salt)).deliver_now

    salt
  end

  # Called to check the code the user types
  # in and make sure it’s valid.
  def verify(email, auth_code, salt)
    user = User.find_by(email: email)

    if user.blank?
      return UserLoginResponse.new(
        "Oh dear, we could not find an account using that email.
        Contact support@nine.shopping if this issue persists."
      )
    end

    unless user.valid_auth_code?(salt, auth_code)
      return UserLoginResponse.new("That code’s not right, better luck next time 😬")
    end

    UserLoginResponse.new(nil, user)
  end

  UserLoginResponse = Struct.new(:error, :user)
end

Controllers and routes

Firstly we need an Authenticatable concern that will provide methods like current_user and user_signed_in?. You will also need to include Authenticatable inside your application_controller.rb file.



# app/controllers/concerns/authenticatable.rb
module Authenticatable
  extend ActiveSupport::Concern

  def authenticate_user!
    redirect_to auth_path unless current_user
  end

  def user_signed_in?
    current_user.present?
  end

  def current_user
    @current_user ||= lookup_user_by_cookie
  end

  def lookup_user_by_cookie
    User.find(session[:user_id]) if session[:user_id]
  end
end

Add the follow to your config/routes.rb file.



resource :auth, only: %i[show create destroy], controller: :auth
resource :auth_verifications, only: %i[show create]

We need two controllers to make this work, AuthController handles requesting auth and logging out, whereas AuthVerificationsController handles checking the OTP was correct.



# app/controllers/auth_controller.rb
class AuthController < ApplicationController
  skip_before_action :authenticate_user!, except: :destroy

  def show; end

  def create
    session[:email] = params[:email]
    session[:salt] = UserLogin.start_auth(params.permit(:email, :first_name, :last_name))
    redirect_to auth_verifications_path
  rescue ActiveRecord::RecordInvalid
    # If the user creations fails (usually when first and last name are empty)
    # we reload the form, and also display the first and last name fields.
    @display_name_fields = true
    render :show
  end

  def destroy
    session.delete(:user_id)
    redirect_to auth_path, notice: "You are signed out"
  end
end


# app/controllers/auth_verifications_controller.rb
class AuthVerificationsController < ApplicationController
  skip_before_action :authenticate_user!

  def show
    @email = session[:email]
    render "auth/verify"
  end

  def create
    @email = session[:email]
    resp = UserLogin.verify(@email, params[:auth_code], session[:salt])

    if resp.error
      flash[:error] = resp.error
      render "auth/verify"
    else
      session.delete(:email)
      session.delete(:salt)
      session[:user_id] = resp.user.id
      redirect_to root_path, notice: "You are now signed in"
    end
  end
end

Views

In these views I am using tailwind CSS, feel free to style them however you want.



<%# app/views/auth/show.html.erb %>
<p class="text-2xl text-gray-900 font-medium mb-3">
  What’s your email?
</p>
<%= form_with(url: auth_path, html: { data: { turbo: false } }) do |f| %>
  <%= f.email_field :email, value: params[:email], placeholder: "you@email.com", class: "w-full rounded-md border-gray-300" %>
  <% if @display_name_fields %>
    <%= f.text_field :first_name, placeholder: "First name", class: "mt-3 w-full rounded-md border-gray-300" %>
    <%= f.text_field :last_name, placeholder: "Last name", class: "mt-3 w-full rounded-md border-gray-300" %>
  <% end %>

  <%= f.submit "Continue", class: "w-full cursor-pointer flex relative justify-center items-center py-2 px-4 rounded-md font-medium leading-6 focus:outline-none transition-colors duration-150 ease-in-out border border-transparent text-white bg-pink-600 hover:bg-pink-500 focus:border-pink-300 focus:shadow-outline-gray mt-3" %>
  <div class="mt-3 text-center text-gray-600 text-sm">By continuing you agree to our <a href="https://nine.shopping/terms" target="_blank" rel="noopener noreferrer" class="underline text-pink-500">Terms of Use</a></div>
<% end %>



<%# app/views/auth/verify.html.erb %>
<div class="leading-relaxed text-lg text-gray-600">
  We just emailed you a six digit code, please enter it in the box below.
</div>

<%= form_with(url: auth_verifications_path, html: { class: "mt-6" }) do |f| %>
  <%= f.label :email, class: "flex items-center justify-between text-sm font-medium text-gray-700 mb-1" do %>
    Email
    <%= link_to "Change", auth_path, class: "text-gray-500 underline font-normal" %>
  <% end %>
  <%= f.email_field :email, value: @email, placeholder: "you@email.com", class: "w-full rounded-md border-gray-300 bg-gray-100", disabled: true %>

  <%= f.label :email, class: "flex items-center justify-between text-sm font-medium text-gray-700 mb-1 mt-3" do %>
    Auth code
    <%= link_to "Re-send code", auth_path(email: @email), method: :post, class: "text-gray-500 underline font-normal" %>
  <% end %>
  <%= f.text_field :auth_code, class: "w-full rounded-md border-gray-300 text-2xl tracking-widest text-center", maxlength: 6 %>

  <%= f.submit "Continue to your account", class: "w-full cursor-pointer flex relative justify-center items-center py-2 px-4 rounded-md font-medium leading-6 focus:outline-none transition-colors duration-150 ease-in-out border border-transparent text-white bg-pink-600 hover:bg-pink-500 focus:border-pink-300 focus:shadow-outline-gray mt-3" %>
<% end %>

Mailer

The final piece of the puzzle is hooking up the mailer to send out your OTPs.



class AuthMailer < ApplicationMailer
  def auth_code(user, auth_code)
    @user = user
    @auth_code = auth_code

    mail to: @user.email, subject: "Hey #{@user.first_name}, use this auth code to sign in"
  end
end



<h1>Hey <%= @user.first_name %>,</h1>
<p>Use the six digit code below to continue signing in to your account (this will expire in 5 minutes).</p>

<table class="attributes" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td class="attributes_content">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td class="attributes_item">
            <span style="display: block; font-size: 35px; font-weight: bold; letter-spacing: 10px; text-align: center;"><%= @auth_code %></span>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

<p>If you didn't request this code you can safely ignore this email.</p>

Screencast: Add welcome emails to Happi

Pete Hawkins — Mon, 04 Oct 2021 08:45:15 +0000

This is the first video in a series where I build happi.team in public, literally, by screencasting developing new features or improvements. The tech stack is Rails, Hotwire and RSpec among many other great open source libraries.

In this video, I show adding welcome emails to be sent out when teams are created, whilst adding tests to make sure it all works.

Apologies my voice is fading a little toward the end!

If you want to check out the product itself it’s at https://happi.team and at the time of this video we have a free plan to let you get setup and test it out.

10 things I add to every Rails app

Pete Hawkins — Sat, 02 Oct 2021 16:25:19 +0000

I end up creating a lot of Rails apps, and each time I get started I often find myself wanting to add similar features or gems that I’m using in other projects.

Here’s a short list of 10 of the most common things I add to every Rails app.

1. Tailwind CSS

I’ve been using Tailwind now for almost 2 years, I am super productive with it and urge you to give it a try if you haven’t yet.

As Adam the founder says...

If you can suppress the urge to retch long enough to give it a chance, I really think you'll wonder how you ever worked with CSS any other way.

Check out my post below for the best way to use Tailwind with Rails.

The best way to run Tailwind CSS on Rails

Pete Hawkins ・ Oct 1 '21

#rails #hotwire #tailwindcss

2. Authentication (Devise)

Unless the project has really specific authentication requirements (like nine.shopping’s auth code approach), I’ll use devise to manage logins.

Alongside this, devise_masquerade is a fantastic plugin to use with your admin area, allowing you to login as other users. This is helpful for debugging account specific issues etc.

3. Email systems

Wether it’s just for ‘forgot password’ emails, pretty much any Rails app I am building is going to send email. There are two handy tools I use for this.

Letter opener web

This gem makes sure you don’t embarrasingly send emails to real users whilst developing or testing, life-saver!

Postmark

Postmark is a service I have been using for years! It’s really easy to integrate into Rails using their postmark-rails gem, plus the product is great, easy to use and very reliable.

4. Admin system

I try to make all of my products as self-serve as possible, requiring as little of my time to set up accounts or keep the product running.

Because of this, having an in-depth admin system to allow me to check on things, block malicious users or make billing changes is necessary.

I usually tend to create these from Scratch, but moving forward I’ve started to use thoughtbot’s administrate gem. It sticks to the Rails conventions of controllers and routing, so it’s easy to customise and add new functionality to.

5. Tests

I am a big fan of TDD and having decent test coverage, this gives me confidence in continuously deploying code and ultimately helps me to develop apps faster.

For testing I use RSpec, along with shoulda-matchers for easily testing model relations & validations.

I use Rails built-in fixtures instead of something like FactoryBot. This is purely for performance reasons, fixtures allow your tests to run much, much faster. Ultimately, I find a fast test suite is more useful and interrupts my workflow a lot less.

6. Rubocop

Sticking with the automated testing side of things, I like to use rubocop to make sure my code is consistent and it also catches some common issues with my code.

I usually follow the Shopify Ruby styleguide with a few minor tweaks.

7. Sentry

Next up is error monitoring with Sentry. Exceptions usually happen in production when real users get a hold of your code, and making sure these are tracked helps a ton in seeing what’s going on and fixing it!

8. Sidekiq

I often don’t set this up right away, but within the first week or two of development comes the time for background jobs. I like to stick with what I know and Sidekiq along with it’s web interface is easy to use and reliable.

9. Metamagic

This one is a small, but very useful gem. It helps set page titles, meta keywords and even open graph tags for sharing on social sites. This is a must if you have a lot of publicly accessible pages and want to start doing some SEO.

<% meta(title: "Sign in to your account") %>

10. Rack attack

The final gem I like to include in all projects is rack-attack. This is a rate limiting tool which is great for throttling dangerous actions in your app to prevent bot attacks or other malicious users.

It works great with APIs, but I also like to use it for login/sign up pages too, like so:

Rack::Attack.throttle("authentication/ip", limit: 30, period: 1.hour) do |req|
  if req.post? &&
       %w[/users/sign_in /users/sign_up /users/password].include?(
         req.path
       )
    req.ip
  end
end