Spencer Watson

Authenticating a JS-based reddit application with user login (Implicit grant flow)

I've been working on an Ember.js project to try and build familiarity with the framework for my new job at BitTitan. The project is to create a Reddit client tailored for use on the TV. I keep my desktop computer plugged into my TV at home, and when I try to browse Reddit on it, the text is just too small to read, and the images don't size how I want. Also, I have my Reddit account set up so that it does not show me links that I have voted on. This is an issue with a lot of Reddit clients that don't use your Reddit login. I don't want to see the generic front page, I want to see my personally tailored front page.

Createing the Reddit Application

When starting on this project, the first thing to do was to get the application to authenticate so that I could be logged in with my Reddit account. First, I created an application at https://www.reddit.com/prefs/apps, and clicking "are you a developer? create an app...". When registering my app, I chose the "Installed app" type. This is counter-intuitive, I know. I tried for hours to get this all to work using the "Web App" type, but ended up at a road block where I created a POST to retrieve the auth token, but it would never complete successfully. By using the "Installed app" type, I didn't even have to make that POST.

I gave my app a name, a description, and an about url that points to my portfolio website. The redirect url I sent back to my application that I was building (localhost:4200/authorization) to a url that would handle the authorization response.


In order to authenticate your app, you must redirect the user to a reddit authorization url: https://www.reddit.com/api/v1/authorize?client_id=CLIENT_ID&response_type=TYPE&state=RANDOM_STRING&redirect_uri=URI&scope=SCOPE_STRING

Parameter Values Description
client_id The Client ID generated during app registration. Tells reddit.com which app is making the request
response_type code Must be the string "code".
state A string of your choosing You should generate a unique, possibly random, string for each authorization request. This value will be returned to you when the user visits your REDIRECT_URI after allowing your app access - you should verify that it matches the one you sent. This ensures that only authorization requests you've started are ones you finish. (You may also use this value to, for example, tell your webserver what action to take after receiving the OAuth2 bearer token)
redirect_uri The redirect_uri you have specified during registration If this does not match the registered redirect_uri, the authorization request will fail. If authorization succeeds, the user's browser will be instructed to redirect to this location.
scope A comma-separated* list of scope strings All bearer tokens are limited in what functions they may perform. You must explicitly request access to areas of the api, such as private messaging or moderator actions. See our automatically generated API docs. Scope Values: identity, edit, flair, history, modconfig, modflair,modlog, modposts, modwiki, mysubreddits, privatemessages, read, report, save, submit, subscribe, vote, wikiedit, wikiread.

When your redirection takes place, the user will be asked to allow or decline access to your application.

Token Retrieval

If the user selects "Allow," they will be redirected to your redirect_uri location. A hash will be added to the end of the url reading #access_token={{token}}&token_type=bearer&expires_in=3600&scope={{scope}}&state={{state}}

Parameter Explanation
access_token Your access token
token_type The string "bearer"
expires_in Seconds until the token expires
scope The scope of the token
state This value should be the same as the one sent in the initial authorization request, and your app should verify that it is, in fact, the same. Your app may also do anything else it wishes with the state info, such as parse a portion of it to determine what action to perform on behalf of the user.

From then on, you can make ajax calls to https://oauth.reddit.com with the header Authorization: bearer {{token}}.

Your message has been sent!