Sing-in page customization

[Артур Файзрахманов]

I've thought about what is the best authentication method to one of my current projects and decided to use only BrowserID. There is an BrowserID auth plugin "for free" included in Yesod platform already.

But in my case I want to have sign-in button right on homepage, which will popup sing-in window without a need to redirect user to arbitrary sing-in page. I also want to have different translation of my site, thus I need to customise a plugin somehow. I believe it is trivial issue, but I'm relatively new to Yesod, thus I'm asking for advice.

So the question is whether provided plugin just a way to get job done quickly? So have I to implement whole auth process myself or there is some trick to achieve that. And is there some articles about such customisations?

P.S. Sorry if I was unclear, sometimes it is hard to explain what I want to ask in English for me.

[Ollie Hunt]

I was going to ask about nearly the same thing. I don't know how BrowserID works, but for normal username password logging in, I imagine you could create a form that POSTs to the default auth route on any other page, but you'd still have the default sign in page if you visit the auth route. Is it possible to customize the sign in pages themselves, and the routes that point to them? As it is, everything is under /auth/, is it possible to have it at the top level? I've been avoiding using the Auth plugin up until now as I just want a registration page at /register and a login page at /login, and to be able to customise the pages themselves.

--
You received this message because you are subscribed to the Google Groups "Yesod Web Framework" group.
To unsubscribe from this group and stop receiving emails from it, send an email to yesodweb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Greg Weber]

For 3rd party auth systems you just need to connect a button to the proper url.

take a look at: https://app.doxiq.com/

You can generate the url from a reference

@{AuthR forwardUrl}

There are a lot of hooks for customizing the auth plugin. You can also just use the JSON API. If you want different urls the simplest solution is to probably have them redirect to auth. You can also always use a WAI middleware that rewrites urls.

http://hackage.haskell.org/package/wai-extra-3.0.1/docs/Network-Wai-Middleware-Rewrite.html

[Артур Файзрахманов]

Oliver Hunt:

I don't know how BrowserID works

Oh, its works like a charm! No password needed, have a look – "Why Persona". (I understood that's not what you are talked about, but after I translated this article BrowserID appeared to be so excited, so I just want to share this knowledge :)

 

Greg Weber:

For 3rd party auth systems you just need to connect a button to the proper url.

take a look at: https://app.doxiq.com/

You can generate the url from a reference

@{AuthR forwardUrl}

There are a lot of hooks for customizing the auth plugin. You can also just use the JSON API. If you want different urls the simplest solution is to probably have them redirect to auth. You can also always use a WAI middleware that rewrites urls.

http://hackage.haskell.org/package/wai-extra-3.0.1/docs/Network-Wai-Middleware-Rewrite.html

I looked at the sources, guess I catch the idea, but I have several notes/questions.

Firstly, looks like there is no option to login with JavaScript disabled, because Persona authentication on client side based on JavaScript itself, thus if I use it, I should not focus on how my site should work for clients without JavaScript [1].

Secondly, this is what I want:

1. User requested a page
   
2. If user does not logged in redirect him to homepage/sign-in page, where sign-in button is, otherwise show requested page.
   
3. User clicks on "Sign in" button – show popup.

So in case of separated homepage and sign-in page, I need to be able change markup of sign-in page, which I believe hardcoded, even if I use redirect and/or rewrite rules (for example to have different translations for "Sign in" button itself).

So, one possible solution is to use AJAX and JSON API as you mentioned. Probably I'll use this way.

Second possibility is not to use auth plugin at all, but implement all process myself. It this case I should clearly understand how authentication handled on server side by Yesod. However, in general this should be quite trivial – I need a JavaScript on client side, so when user logs in or out, this script should send proper request to the server, where I have to manage session store correctly (I don't know is there something else about user authentication, I assume that other actions should be needed).

For now easiest way seems to have a sign-in button, Persona's javascript library and little custom script on home page, which will listen to Persona's events and when user logged in it should send AJAX request or redirect user to login verification page. Hmm, so I have to manage session manually anyway. But I could look BrowserId auth plugin source code again, to understand what should I do after login verified or not, right?

[1] https://developer.mozilla.org/en/Persona/Quick_Setup

[Артур Файзрахманов]

I've added to `Yesod.Auth.Messages` Russian translation and created a pool request, so I believe one issue (about translation) will be solved when it will be merged. But I'm unsure about how to use it – I guess I should just bump version of `yesod-auth` in my project's cabal file and install that dependecy?

I've also briefly looked at `Yesod.Auth.BrowserID` and `Yesod.Auth`, in spite of it's hard to me understand everything now, I've noticed that there is built-in ability to use JSON requests to auth handlers, maybe there is some article or tutorial about it already?

[Greg Weber]

On Mon, Jul 28, 2014 at 10:45 AM, Артур Файзрахманов <hera...@gmail.com> wrote:

I've added to `Yesod.Auth.Messages` Russian translation and created a pool request, so I believe one issue (about translation) will be solved when it will be merged. But I'm unsure about how to use it – I guess I should just bump version of `yesod-auth` in my project's cabal file and install that dependecy?

I've also briefly looked at `Yesod.Auth.BrowserID` and `Yesod.Auth`, in spite of it's hard to me understand everything now, I've noticed that there is built-in ability to use JSON requests to auth handlers, maybe there is some article or tutorial about it already?

Sorry, the documentation could definitely be improved. The html flow is kind of self-documenting since it already works in the scaffold. One approach you can take is to look at any existing examples of using yesod-auth via HTML, but just start sending JSON requests to the same urls.

[Артур Файзрахманов]

I've updated `yesod-auth` to v1.3.3 with recently added translations, but sign-in messages are still in English, no matter what language is set. I also could not find where auth layout defined (I saw it somewhere in the past).

[Артур Файзрахманов]

I've updated `yesod-auth` to v1.3.3 with recently added translations, but sign-in messages are still in English, no matter what language is set. I also could not find where auth layout defined (I saw it somewhere in the past).

Sorry, friends. I've checked everything again, there is nothing to be translated, because BrowserID plugin generates only <a> tag with "Sign in with Persona" image inside.

I've also moved a bit further with JSON requests, it seems I just need to send request to route `@{toMaster complete}/` with appended assertion, which defaults to `/auth/page/browserid/`. Haven't tested this yet.

[Артур Файзрахманов]

Well, I had to understand how Persona works, and how it realised in plugin code.

Changing default "after-login" and "after-logout" routes (aka destination routes) is fairy easy - this is in `Foundation.hs`

instance YesodAuth App where

    type AuthId App = UserId

    -- Where to send a user after successful login

    loginDest _ = HomeR

    -- Where to send a user after logout

    logoutDest _ = HomeR

Then, I have added on home page customised sing-in button, and script which tells Persona to use it. This script hardcoded now.

There is a helper function `createOnClickOverride` exposed by plugin. I want to use it to eliminate boilerplate JavaScript code, but its second argument is a function of type `Route Auth -> Route master` and I can't find out what should I pass there (please point me right one).

Authorisation works fine with this changes.

[Michael Snoyman]

In a normal site, AuthR is the "function" (really constructor) you're looking for. It wraps up an auth route into your master site.

--

[Артур Файзрахманов]

Works like a charm :)

However, to configure some Persona's popup properties, e.g. site name and etc., I have to leave written JavaScript code.

But for learning purposes it's good to know how things work.