DEV Community

loading...
DID.app

Create buttons for 'Signing in with DID.app'

richardlikestea profile image Richard Shepherd Updated on ・2 min read

Here at DID.app we are releasing our logos into the wild so you can create custom 'Sign in with DID.app' buttons on your (undoubtedly excellent) website.

This is a super-quick guide to adding custom buttons to your website.

  1. Head over to the brand resource guidelines page. There you will find all our logo images and our icon images too.

  2. You can copy and paste an example button. Here are a few examples to choose from (feel free to design your own too):

A light button that can be used on most pages:
A very attractive sign in with did.app button wouldn't you say?

<div style="display:inline-block;padding:0.3em;border:1px solid gray;margin:1em;border-radius:4px;">
  <span style="display:flex;align-items:center;">
    <img src="/icon.svg" style="height:30px">
    <span style="padding:0 1rem;">Sign in with DID.app</span>
  </span>
</div>

A block style button:
Alt Text

<div style="display:inline-block;padding:0.3em;margin:1em;background:#00dfc0;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light-mono" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>
  </span>
</div>

A dark sign in button:
Alt Text

<div style="display:inline-block;padding:0.3em;margin:1em;background:#2a454e;color:white;">
  <span style="display:flex;align-items:center;">
    <img src="/logo.svg#light" style="height:30px">
    <span style="padding:0 1rem;font-weight:bold;white-space:nowrap;">Sign in</span>
  </span>
</div>

An icon only button:
Alt Text

<img src="/icon.svg#light-mono" style="height:40px;background:#00dfc0;padding:0.5em;border-radius:1em;">

To turn the image into a button that triggers the authentication flow you can create a form and add your button into the html tag that handles submission.
Here's an example from DID.app's Step By Step Integration guide.

<form action="https://auth.did.app/oidc/authorize" method="get">
  <input name="client_id" value="[CLIENT_ID]" type="hidden" />
  <input name="redirect_uri" value="[REDIRECT_URI]" type="hidden" />
  <input name="response_mode" value="form_post" type="hidden" />

  <button type="submit">Sign in</button>
</form>

Feel free to reach out to me if you have any questions about our custom buttons. I can be found by emailing team@did.app

Discussion (0)

pic
Editor guide