3rd Party Authentication
Next to the default secure login, Directus allows you to use several external services as means of authentication. In this article, we’ll take a quick look at the what, why, and how of 3rd Party Authentication.
Directus lets you stop worrying about yet another password by allowing you to use your existing account from a different service, like Facebook or Twitter, to login to the Directus admin panel.
Setting it up
Adding the ability to login to Directus via external services doesn’t mean everybody who has a Facebook account can just login whenever they like. Directus uses the existing list of users to cross reference the information it gets from the external service. You could say Directus uses it’s own user accounts as a whitelist of accepted external-accounts.
Out of the box, Directus supports four external services to use for authentication: Facebook, Twitter, GitHub, and Google. The setup for all these services is pretty much the same. You create a new account within Directus using the same email-address that is used on the account on the external service, log on to the external service, create a new “app”, and add the keys to the Directus config. Since the process of creating this “app” and getting the keys is different for each service provider, we’ll go through each step for every service.
To create a Facebook app which allows users to login to external services, head to https://developers.facebook.com and login with your Facebook account.
Hover over “My Apps” in the top right and click Add a New App:
On the dashboard overview page, add the “Facebook Login” product to your app.
Add the root URL of your Directus instance followed by /auth/facebook/receive in the “Valid OAuth redirect URIs” field. The rest of the default settings are fine for use with Directus.
Save the changes and head over to the Settings page. Click the “+ Add Platform” button and add a website with the URL of your Directus instance:
It’s recommended to fill out the other fields as well and add an app icon so the user will recognize your brand while logging in through Facebook. It’s not required for Directus to work though, so we’ll skip it simplicities sake.
Last, head over to the Dashboard page to retrieve the keys we need to add to Directus:
These values have to be added to the auth field in the /api/configuration.php file in your Directus instance like follows:
// /api/configuration.php...'auth' => [
'facebook' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef',
'graph_api_version' => 'v2.10'
]
],...
That’s it! Heading to the Directus instance login page now shows the Facebook login button:
To create a Twitter app which allows users to login to external services, head to https://apps.twitter.com and login with your Twitter account.
Click “Create New App” and enter the required information:
Note that the callback url is the root URL of your Directus instance followed by /auth/twitter/receive.
Head over to the “Permissions” tab, set the “Access” to read-only and make sure the email address is included in the payload by checking “Request email addresses from users”.
Note: you might need to fill out the “Privacy Policy URL” and “Terms of Service URL” before Twitter allows you to save these permissions
After setting the permissions, head to the “Keys and Access Tokens” tab and copy the keys.
Add the “Consumer Key” and “Consumer Secret” to Directus’ configuration file (/api/configuration.php):
// /api/configuration.php...'auth' => [
'facebook' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef',
'graph_api_version' => 'v2.10'
],
'twitter' => [
'identifier' => 'abcdef123456',
'secret' => '123456abcdef'
]
],...
That’s it! Heading to the Directus instance login page now shows the added Twitter login button:
GitHub
To create a GitHub app which allows users to login to external services, head to https://github.com/settings/developers and login with your GitHub account.
Hit the “New OAuth App” button and fill in the required information:
Note: the Authorization callback URL is the root URL of your Directus instance followed by /auth/github/receive.
Copy over the Client ID and Client Secret to the Directus API configuration (/api/configuration.php):
// /api/configuration.php...'auth' => [
'facebook' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef',
'graph_api_version' => 'v2.10'
],
'twitter' => [
'identifier' => 'abcdef123456',
'secret' => '123456abcdef'
],
'github' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef'
]
],...
That’s it! Heading to the Directus instance login page now shows the added GitHub login button:
To create a Google project which allows users to login to external services, head to https://console.developers.google.com/projectcreate and login with your Google account.
Fill in a name for your project and head over to the “Library” page (subpage of “APIs & services”).
Search for the Google+ API library and enable it for this project:
Head over to the “Credentials” page, click on the “OAuth consent screen” tab and fill in the required information:
Save your information, head back to the Credentials tab, and click “Create credentials”, followed by “OAuth client ID”:
Fill in the required information as follows:
We don’t need to fill in the “Authorized JavaScript origins” field.
When you click save, you’re immediately presented with the required keys. Add these keys to the auth array in Directus’ configuration file /api/configuration.php:
// /api/configuration.php...'auth' => [
'facebook' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef',
'graph_api_version' => 'v2.10'
],
'twitter' => [
'identifier' => 'abcdef123456',
'secret' => '123456abcdef'
],
'github' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef'
],
'google' => [
'client_id' => 'abcdef123456',
'client_secret' => '123456abcdef'
]
],...
That’s it! Heading to the Directus instance login page now shows the added Google login button:
There you have it! Four brand new safe ways of accessing your valuable data.
What service are you going to use to access Directus? Let us know in the comments below!
Happy coding!
Your friends at Directus
🐰
PS: Have a good idea on a topic for following articles? Let us know in the comments or join us over on our public Slack channel!
