Comply with Third Party Legal & Brand Requirements related to OpenID & OAuth

[jeremybradbury]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

Google wants to be rainbow: https://developers.google.com/identity/branding-guidelines

Twitch wants to be purple: https://developers.google.com/identity/branding-guidelines

Facebook wants you to "continue with Facebook"

Twitter want to "sign in with Twitter"

You get the point. The monochrome treatment is only okay with Discord (since gray is a brand color) AFAIK.

There is another legal/security issue of the logos not leading directly to the third party.

There is a click on a branded logo (that doesn't meet any brand standards) to a url on the directus site /auth/login/twitch before the outbound call.

This violates the OAuth2 standard, which was partly built around brand & legal/copy enforcement of providers, and brand guidelines of many providers... but also around user safety/security.

The user should be able to hover the icon and see they're going to Twitch, when they click on the Twitch icon. Only a "real user click" should trigger the outbound request.

And for example, since Twitch has so many bad/beginner marketing partners, their rules are quite strict. Clicking a link with their logo which leads to your site and url with their name in it, is an implication of partnership in their eyes, even if that page redirects to their site.

To Reproduce

Implement one or many OAuth2 or OpenID solutions

Errors Shown

Monochrome icons are shown violating Third Party brand/logo requirements like Google & Twitch (s).

"Real user clicks" from brand icons do not link directly to the Third Party. The brands allow us to use their logos, when shown in full color and directly linked.

The solution seems two part:

1. choosing a colored icon set, closer to brand OR the actual branded buttons they provide
2. directly linking out from branded buttons

What version of Directus are you using?

v9.6.0

What version of Node.js are you using?

14.17.0

What database are you using?

Postgres 12

What browser are you using?

Chrome, Brave & Firefox

What operating system are you using?

Windows & Linux

How are you deploying Directus?

systemd service