rake db:migraine


I :heart: Ruby, Rails, AngularJS, and cats.

© 2014. All rights reserved.

AngularJS, HTML5 History, and Omniauth

Here is a little problem I ran into the other day.

  • I have a Rails application serving an AngularJS application
  • I am using Omniauth to allow users to sign in to my application through GitHub
  • I have enabled html5Mode in my AngularJS application

When I add a sign in link for the appropriate Omniauth action, it doesn't work!

<a href="/auth/github">Sign In</a>

This link does not route to my Omniauth action as expected. Instead, I end up at my otherwise route, which is a pretty 404 page.

mySexyApp.config(function($locationProvider, $routeProvider) {
  $locationProvider.html5Mode(true);

  $routeProvider.otherwise({
    templateUrl: 'templates/not_found.html'
  });
});

What happened?

AngularJS hijacks the behavior of all links to perform its routing. All I am doing is updating the browser's history, which is exactly what I wanted by enabling HTML5 mode.

So, how do I get around this, you ask?

<a href="/auth/github" target="_self">Sign In</a>

Boom! The link will work as expected. By specifying target="_self" I am getting around the history changing and sending the request to my server.