Customized Styling for Devise Authentication Elements

As we all know, authentication can be tricky. Session persistence, encryption, third-party authentication, password resets…. there’s a lot to handle, and the stakes for screwing it up are high. Unless you consider yourself a specialist in authentication, it’s often best to eat a slice of humble pie and look at what the pros have made available to us.

When it comes to authenticating Ruby apps, that means using our old friend Devise. Devise gives options for nearly anything we could imagine having in a login/signup form.

Okay. We’ve installed the Devise gem and used rails g devise user to generate, behind the scenes, a database migration, model and series of views for users. We’ve migrated and we’ve thrown our Devise authenticate_user! method into a few places in our controller so that our users are asked to login if they haven’t yet. Cool! So for all intents and purposes now, we have authentication.

One problem, though : it looks all janky. The login form doesn’t fit into the style of the rest of the app.

So how do we style this thing? We can’t seem to find the file anywhere. Where are the view files for Devise elements?

They’re hidden. O.O

Devise keeps all of its generated files invisible by default. But we can expose them! Or, technically, we can copy them and make the copies the official one that gets used. It’s easy as pie.

rails g devise:views users

Boop! If we look in our views directory we’ll notice that Santa came early this year and he brought us a box full of CONTROL!

Over our Devise elements, I mean. If we open up the devise directory, we’ll see seven different directories. We’ll focus on three. sessions contains our login form, and registrations contains our new user form. Both of these forms are style-able with classes or ids just like anything we made ourselves. One thing that may bug you once you start playing with them is that changing the background of a form doesn’t change the form of everything that’s generated. First, move the heading inside the form element. Then take a look at the links that we pull in from the shared subfolder in the devise directory. This nifty file contains all the links to reset passwords, login with social media, etc. Just move the render up into the form element.

Boom! Everything’s contained in one unit now. Add a class or id to the form element and edit the main css file for your app to make them look how you like. I recommend giving the form width: 200px so that if you want to give it a custom background, it doesn’t look like it’s stretching across the page. If you’re feeling less custom-y and more boostrap-y, use the grid system to achieve the same effect!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s