DEV Community: Elvinas Predkelis

Ruby on Rails: Native route constraint for authentication

Elvinas Predkelis — Fri, 19 Apr 2024 13:21:39 +0000

Since Rails 7, there's more and more tooling that enables us, developers, to roll our own authentication. Devise is great and has been an amazing companion over the years. It also has this neat little feature - an authenticated route constraint which "hides" certain routes from people that are not signed in.

If you're using devise, you might have seen something like this:

# routes.rb

authenticated { |user| user.admin? } do
  get :dashboard
end

We'll try to replicate this natively.

Constraint

We'll leverage advanced routing constraints to make this happen. Honestly, it's not as scary as it sounds. It basically means that we'll extract the logic to a class.

Below is a barebones class for the constraint.

# app/constraints/authenticated_constraint.rb

class AuthenticatedConstraint
  def matches?(request)
    return true_if_authenticated_method
  end
end

How does the user authentication work?

Web applications usually leverage cookies to facilitate user authentication. When a user signs in, a cookie with a unique identifier is set in the browser. This cookie is then used to identify the user on subsequent requests.

Therefore, the signing in logic in your application might look something like this:

def sign_in(user)
  Current.user = user
  cookies.encrypted.permanent[:autheticated_user_id] = user.id
end

Similarly, when a user signs out, the cookie is removed. Pretty simple.

Accessing the cookies

In order to figure out whether a user is signed in, we'll use the same exact cookies in the constraint.

Rails usually encrypts the cookies for security reasons. Fortunately, there's decryption tooling that helps to dip our fingers into the cookie jar.

def matches?(request)
  @cookies = ActionDispatch::Cookies::CookieJar.build(request, request.cookies)

  # And then the cookies are accessible, for example:
  @cookies.encrypted[:authenticated_user_id]

  # ...
end

Passing a block

A neat little thing that authenticated also method does is that it allows passing a block. This block helps to add additional conditions to the constraint. For example, checking whether the user is an administrator.

In other words, we'll recreate that { |user| user.admin? } part.

def initialize(&block)
  @block = block || lambda { |user| true }
end

def matches?(request)
  # ...

  # Here we could call the supplied block
  @block.call(current_user)

  # ...
end

Voilà!

Finally, we can mix everything together and add some finishing touches to make everything more readable.

The finished constraint class is as follows:

# app/constraints/authenticated_constraint.rb

class AuthenticatedConstraint
  def initialize(&block)
    @block = block || lambda { |user| true }
  end

  def matches?(request)
    @cookies = ActionDispatch::Cookies::CookieJar.build(request, request.cookies)
    return signed_in? && @block.call(current_user)
  end

  private

  def current_user
    @user ||= User.find(@cookies.encrypted[:authenticated_user_id])
  end

  def signed_in?
    current_user.present?
  end
end

Obviously, it might need some adjustment to fit your application.

Implementation

Adding this constraint into action is rather straight forward as authenticated method was used as an inspiration.

# routes.rb

# Routes available to admins only
constraints AuthenticatedConstraint.new{ |user| user.admin? } do
  mount Sidekiq::Web => "/sidekiq"
  get :admin_dashboard
end

# Routes available to authenticated users
constraints AuthenticatedConstraint.new do
  get :my_profile
  root to: :dashboard, as: :user_root
end

That's it! 🎉

Wrapping up

Hopefully, this article has shed some light on how to create a route constraint for authenticated users. It's rather useful when trying to set a new root route for authenticated users. Also, limit the access to certain routes based on user roles.

If you have any questions or suggestions, feel free to reach out to me on Twitter or visit my website!

Hotwire + Tailwind: Fade In without Javascript

Elvinas Predkelis — Mon, 30 May 2022 13:31:48 +0000

This article will outline how to fade in a loaded turbo frame without additional Javascript.

Disclaimer - The setup includes Tailwind configuration which is technically Javascript.

Idea and Setup

Sometimes just loading content to a turbo frame feels rather jerky. Adding a simple fade-in can work miracles and make the app feel smoother and faster.

The usual approach to this is adding a Javascript animation. Fortunately, it is possible to add the same exact effect with just CSS. 🥳

Adding CSS animations to Tailwind

The setup for Tailwind is pretty straight-forward. The whole idea is to add a CSS animation that turns the element's opacity from 0% to 100%.

// tailwind.config.js

module.exports = {
  // ...
  theme: {
    extend: {
      animation: {
        "fade-in": "fadeIn 0.15s ease-in-out"
      },
      keyframes: () => ({
        fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 }
        }
      })
    }
  }
}

Now this animation will be available by adding an animate-fade-in class to an element. 💆

Using the fade-in on a Turbo Frame

Applying the fade it is literally adding a animate-fade-in class to the turbo frame (or the content inside it).

<turbo-frame id="loadable" class="animate-fade-in">
  <h3 class="uppercase font-semibold">Fading in</h3>
</turbo-frame>

Voilà!

Wrapping up

Obviously, such fade-in could be used outside the context of Hotwire or Tailwind. However, this seemed as a great use case that invites better UX and has minimal overhead.

If you have any questions or suggestions, feel free to reach out to me on Twitter or visit my website!

Hotwire + Tailwind: Spinner without Javascript

Elvinas Predkelis — Tue, 24 May 2022 18:53:00 +0000

This article will outline how to show a spinner while loading a turbo frame without additional Javascript.

Disclaimer - The setup includes Tailwind configuration which is technically Javascript.

Idea and Setup

The setup is pretty straight-forward. It's just a turbo frame with a spinner inside of it.

However, when the frame is being loaded, it looks something like <turbo-frame id="loadable" busy="" aria-busy="true"> - it has a [busy] attribute attached to it.

Turns out, it's possible to leverage that [busy] attribute. 💆

Adding Tailwind modifiers

This is where most of the 🪄🎩 magic 🎩🪄 happens. Tailwind allows to set up custom modifiers which is exactly what we need in this case.

// tailwind.config.js

let plugin = require("tailwindcss/plugin")
module.exports = {
  // ...
  plugins: [
    plugin(({ addVariant }) => {
      addVariant("busy", "&[busy]")
      addVariant('group-busy', ':merge(.group)[busy] &')
    })
  ]
}

Here a busy modifier is set up which is bound to the [busy] attribute. Also, group-busy is added to target the spinner inside of the parent turbo frame.

Finishing touches

Now we can just ✨sprinkle✨ some classes on some elements.

<turbo-frame id="loadable" class="group">
  <svg
    class="group-busy:inline hidden h-6 w-6 animate-spin"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path
      class="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
    ></path>
  </svg>
</turbo-frame>

In this instance, the spinner just appears while the turbo frame is being loaded. The frame element now has a group class while the spinner now has group-busy:inline hidden classes.

Obviously, you can now style it to your liking when using the respective modifiers. For example, busy:opacity-50 will make the turbo frame transparent while loading.

Wrapping up

The main goal was to once again shake off some unnecessary Javascript from the codebase. This turned out to be a rather tidy way of doing so while keeping the simplicity of Hotwire and the flexibility of Tailwind.

If you have any questions or suggestions, feel free to reach out to me on Twitter or visit my website!