2017 / 10 / 30 comments

FeathersJS OAuth authentication with cordova

FeathersJS OAuth authentication with cordova

Using OAuth with cordova can be complicated because the process implies some url redirections. So when using FeathersJS OAuth login with a cordova app, an extra step is added. This tutorial shows how to solve this problem.

For this guide you are going to need a working cordova app. You can use something like ionic, quasar or my vue cordova template.

Also here you have an example of a cordova app working with feathers oauth authentication.

First we need to generate a FeathersJS app with github oauth authentication.

mkdir feathers-cordova-oauth-example-backend
cd feathers-cordova-oauth-example-backend
feathers generate app
feathers generate authentication
# Select GitHub

Now on github create a new oauth app. Homepage URL has the redirect to the domain where your web app is running and Authorization callback URL is where your feathers backed is running.

Let’s go back to our feathers generated app. Copy the Client ID and Client Secret in the file /config/default.json and add the url where your app is running inside successRedirect.

We are ready now for setting up the frontend.

Frontend

Install the following dependencies in your cordova app.

npm install feathers feathers-authentication-client feathers-socketio socket.io-client
cordova plugin add cordova-plugin-inappbrowser

And this is the code for oauth login through feathers inside cordova.

cordovaOauthLogin () {
	// Open a new InAppBrowser for linkedin oauth login
	const browser = window.cordova.InAppBrowser.open(
		'http://localhost:3030/auth/github',
		'_blank',
		'location=no,clearsessioncache=yes,clearcache=yes'
	)

	// Starts event to detect when the login has finished
	// and the feathers cookie is ready
	browser.addEventListener('loadstop', event => {
		// Detect the successRedirect from feathers
		if (event.url === 'http://localhost:8080/') {
			browser.executeScript(
				{ code: 'document.cookie.valueOf("feathers-jwt")' },
				async cookie => {
					// Extract and set feathers-jwt token from cookie
					const token = `${cookie}`.slice(13)
					localStorage.setItem('feathers-jwt', token)

					// Close the InAppBrowser
					browser.close()

					// Login after token is ready on the localStorage
					this.login()
				}
			)
		}
	})
}

Here you can see an implementation of this example.

Let me explain why this is necessary.

Oauth redirects the current page to a service provider website where the user authenticates, if everything is okay the user is redirected to the success url. Cordova uses a filesystem url to load websites so this approach can’t work.

The code above what it does is, using the cordova inappbrowser plugin, creates a new browser instance that handles the oauth redirections, with a javascript event, that detects when the successRedirect page is visited.

When the event run its callback the feathers-jwt cookie is extracted and returned to the feathers client in the cordova app to finally authenticate.