Use IndieAuth for client ID (#1427)

* Use IndieAuth for client ID

* Lint

src/auth/ha-auth-flow.js

@@ -35,7 +35,6 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
     return {
       authProvider: Object,
       clientId: String,
-      clientSecret: String,
       redirectUri: String,
       oauth2State: String,
       _state: {
@@ -54,10 +53,8 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
 
     fetch('/auth/login_flow', {
       method: 'POST',
-      headers: {
-        Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
-      },
       body: JSON.stringify({
+        client_id: this.clientId,
         handler: [this.authProvider.type, this.authProvider.id],
         redirect_uri: this.redirectUri,
       })
@@ -89,12 +86,13 @@ class HaAuthFlow extends EventsMixin(PolymerElement) {
     }
     this._state = 'loading';
 
+    const postData = Object.assign({}, this._stepData, {
+      client_id: this.clientId,
+    });
+
     fetch(`/auth/login_flow/${this._step.flow_id}`, {
       method: 'POST',
-      headers: {
-        Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
-      },
-      body: JSON.stringify(this._stepData)
+      body: JSON.stringify(postData)
     }).then((response) => {
       if (!response.ok) throw new Error();
       return response.json();

src/auth/ha-pick-auth-provider.js

@@ -45,17 +45,12 @@ class HaPickAuthProvider extends EventsMixin(PolymerElement) {
       },
       authProviders: Array,
       clientId: String,
-      clientSecret: String,
     };
   }
   connectedCallback() {
     super.connectedCallback();
 
-    fetch('/auth/providers', {
-      headers: {
-        Authorization: `Basic ${btoa(`${this.clientId}:${this.clientSecret}`)}`
-      }
-    }).then((response) => {
+    fetch('/auth/providers').then((response) => {
       if (!response.ok) throw new Error();
       return response.json();
     }).then((authProviders) => {

src/common/auth/fetch_token.js

@@ -1,12 +1,10 @@
 export default function fetchToken(clientId, code) {
   const data = new FormData();
+  data.append('client_id', clientId);
   data.append('grant_type', 'authorization_code');
   data.append('code', code);
   return fetch('/auth/token', {
     method: 'POST',
-    headers: {
-      authorization: `Basic ${btoa(clientId)}`
-    },
     body: data,
   }).then((resp) => {
     if (!resp.ok) throw new Error('Unable to fetch tokens');

src/common/auth/refresh_token.js

@@ -1,12 +1,10 @@
 export default function refreshAccessToken(clientId, refreshToken) {
   const data = new FormData();
+  data.append('client_id', clientId);
   data.append('grant_type', 'refresh_token');
   data.append('refresh_token', refreshToken);
   return fetch('/auth/token', {
     method: 'POST',
-    headers: {
-      authorization: `Basic ${btoa(clientId)}`
-    },
     body: data,
   }).then((resp) => {
     if (!resp.ok) throw new Error('Unable to fetch tokens');

src/entrypoints/authorize.js

@@ -19,11 +19,22 @@ class HaAuthorize extends PolymerElement {
     <div class="layout vertical center fit">
       <img src="/static/icons/favicon-192x192.png" height="192">
 
+      <p>Logging in to <b>[[clientId]]</b>.</p>
+
       <template is="dom-if" if="[[_authProvider]]">
-        <ha-auth-flow client-id="[[clientId]]" client-secret="[[clientSecret]]" redirect-uri="[[redirectUri]]" oauth2-state="[[oauth2State]]" auth-provider="[[_authProvider]]" on-reset="_handleReset">
-      </ha-auth-flow></template>
+        <ha-auth-flow
+          client-id="[[clientId]]"
+          redirect-uri="[[redirectUri]]"
+          oauth2-state="[[oauth2State]]"
+          auth-provider="[[_authProvider]]"
+          on-reset="_handleReset"
+        ></ha-auth-flow>
+      </template>
       <template is="dom-if" if="[[!_authProvider]]">
-        <ha-pick-auth-provider client-id="[[clientId]]" client-secret="[[clientSecret]]" on-pick="_handleAuthProviderPick"></ha-pick-auth-provider>
+        <ha-pick-auth-provider
+          client-id="[[clientId]]"
+          on-pick="_handleAuthProviderPick"
+        ></ha-pick-auth-provider>
       </template>
     </div>
 `;
@@ -36,7 +47,6 @@ class HaAuthorize extends PolymerElement {
         value: null,
       },
       clientId: String,
-      clientSecret: String,
       redirectUri: String,
       oauth2State: String,
     };
@@ -53,7 +63,6 @@ class HaAuthorize extends PolymerElement {
     }
     const props = {};
     if (query.client_id) props.clientId = query.client_id;
-    if (query.client_secret) props.clientSecret = query.client_secret;
     if (query.redirect_uri) props.redirectUri = query.redirect_uri;
     if (query.state) props.oauth2State = query.state;
     this.setProperties(props);

src/entrypoints/core.js

@@ -28,19 +28,23 @@ const init = window.createHassConnection = function (password, accessToken) {
     });
 };
 
+function clientId() {
+  return `${location.protocol}//${location.host}/`;
+}
+
 function redirectLogin() {
-  document.location = `${__PUBLIC_PATH__}authorize.html?response_type=code&client_id=${window.clientId}&redirect_uri=/`;
+  document.location = `${__PUBLIC_PATH__}authorize.html?response_type=code&client_id=${encodeURIComponent(clientId())}&redirect_uri=${encodeURIComponent(location.toString())}`;
 }
 
 window.refreshToken = () =>
-  refreshToken_(window.clientId, window.tokens.refresh_token).then((accessTokenResp) => {
+  refreshToken_(clientId(), window.tokens.refresh_token).then((accessTokenResp) => {
     window.tokens.access_token = accessTokenResp.access_token;
     localStorage.tokens = JSON.stringify(window.tokens);
     return accessTokenResp.access_token;
   }, () => redirectLogin());
 
 function resolveCode(code) {
-  fetchToken(window.clientId, code).then((tokens) => {
+  fetchToken(clientId(), code).then((tokens) => {
     localStorage.tokens = JSON.stringify(tokens);
     // Refresh the page and have tokens in place.
     document.location = location.pathname;