Vuetify app with Wikimedia OAuth login

Do you often find yourself wanting to make a basic (or complex) web app that is client side only and will log users into Wikimedia sites with ease? Me to!

I have been trying this every year or so, and it’s gradually been getting easier. This year it only took me a couple of to get a really nice template web app setup using Vue, Vuetify and a OAuth 2.0 Wikimedia consumer (thanks to the OAuth extension).

Firstly, some links that you’ll find useful:

• Wikimedia OAuth 2 for developers
• Authorization code grant flow

Starting off with a default Vuetify app install using vite (commit c3edb0f), you’ll end up with a basic web page that just says welcome to Vuetify. You can copy the code in my commit, or just follow the Vuetify instructions.

In order to authenticate, we need to set up an OAuth 2 consumer on the MediaWiki install that we want to login to. As I want to login to all Wikimedia sites, I decided to target meta.wikimedia.org.

Getting the settings just right can be hard, so I’d recommend partially blindly following this example consumer that I wrote specifically for this post. The key parts are:

• Head to the OAuth consumer registration page
• Enter the required fluffy fields such as name, description, email, version, grants, applicable project, terms agreement etc.
• Set the callback URL to a real callback that you will use in your app. And yes this means you will likely need a different consumer for development vs production
  • Eg. http://localhost:3000/auth/mediawiki/callback
• Uncheck (set to false) Client is confidential

Your app will end up looking something like this…

Note that until it is approved, it will likely only work with your registering user account.

Next, we need to add the authentication flow to the app, which I added over 3 commits, condensed into this diff.

To summarize:

• OAuth setup:
  • Some generic helper functions
  • Implement the callback that will be used as part of the OAuth flow
  • Register the route
  • Configure OAuth with the publically viewable data
• New Pages and components:
  • Replace the HelloWorld component with a Home page, Footer and Callback for use by OAuth, also do some other cleaning up of the basic hello world app…
  • Create somewhere to store the state
  • Add login and logout buttons to the top nave bar of the app
  • Implement a home page that either will display the username if logged in

If you manage all of this, or just checkout commit 3f84d2d and run npm run dev, you’ll see a landing page prompting you to login.

Clicking LOGIN in the top right will redirect you to meta.wikimedia.org to login and or allow the application.

Clicking on Allow will redirect you back to the app, and the callback.

First off, you will see Loading…, as there is no user or error (code line).

The callback will then try to finish the OAuth cycle (code lines), before setting the user on success.

Setting the user will cause you to see Redirecting… (code line), which will then take you back to the home page.

And the home page should then display your username, taken from the authentication state.

I don’t dive any further into using OAuth for tokens and making further authenticated requests to action and rest based APIs, but I hope this is a good starting point for you if you are reading this!

ps. sorry Jakob for not writing this 1 month earlier (when I actually wrote the code)

Edit

Some good conversation happened with Lucas after this post landed on Mastodon (this is also the moment in my life I realize embedding Mastodon posts is not so easy… So you can find a link to the thread below, but I’ll quote everything too.

Post by @Addshore@mas.to

View on Mastodon

Lucas said…

If you wrote this code a month ago, then I think you would’ve been hard pressed to make further authenticated requests to the action API, because I only made that work last week :P https://phabricator.wikimedia.org/T322944#10536893

(I should probably send an email about that to wikitech-l ^^)

btw, I notice src/config/oauth.ts doesn’t include the client secret, so you’d be affected by https://phabricator.wikimedia.org/T323855 (see also https://github.com/lucaswerkmeister/m3api-oauth2/?tab=readme-ov-file#non-confidential-clients)

Edit 2

Lucas went ahead and tested the authenticated API requests, and you can find a commit making it work by requesting an edit count for the logged in user from Wikidata https://github.com/addshore/wd2/pull/1/commits/17809460931a3ce6ccb5a9a341b1629b673a836f