diff --git a/src/common/auth/fetch_token.js b/src/common/auth/fetch_token.js
deleted file mode 100644
index e96153127b..0000000000
--- a/src/common/auth/fetch_token.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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', {
- credentials: 'same-origin',
- method: 'POST',
- body: data,
- }).then((resp) => {
- if (!resp.ok) throw new Error('Unable to fetch tokens');
- return resp.json().then((tokens) => {
- tokens.expires = (tokens.expires_in * 1000) + Date.now();
- return tokens;
- });
- });
-}
diff --git a/src/common/auth/refresh_token.js b/src/common/auth/refresh_token.js
deleted file mode 100644
index 2a11aa1e64..0000000000
--- a/src/common/auth/refresh_token.js
+++ /dev/null
@@ -1,17 +0,0 @@
-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', {
- credentials: 'same-origin',
- method: 'POST',
- body: data,
- }).then((resp) => {
- if (!resp.ok) throw new Error('Unable to fetch tokens');
- return resp.json().then((tokens) => {
- tokens.expires = (tokens.expires_in * 1000) + Date.now();
- return tokens;
- });
- });
-}
diff --git a/src/common/auth/token.js b/src/common/auth/token.js
new file mode 100644
index 0000000000..66ade7ae49
--- /dev/null
+++ b/src/common/auth/token.js
@@ -0,0 +1,76 @@
+import { storeTokens, loadTokens } from './token_storage.js';
+
+function genClientId() {
+ return `${location.protocol}//${location.host}/`;
+}
+
+
+export function redirectLogin() {
+ document.location.href = `/auth/authorize?response_type=code&client_id=${encodeURIComponent(genClientId())}&redirect_uri=${encodeURIComponent(location.toString())}`;
+ return new Promise((() => {}));
+}
+
+
+function fetchTokenRequest(code) {
+ const data = new FormData();
+ data.append('client_id', genClientId());
+ data.append('grant_type', 'authorization_code');
+ data.append('code', code);
+ return fetch('/auth/token', {
+ credentials: 'same-origin',
+ method: 'POST',
+ body: data,
+ }).then((resp) => {
+ if (!resp.ok) throw new Error('Unable to fetch tokens');
+ return resp.json().then((tokens) => {
+ tokens.expires = (tokens.expires_in * 1000) + Date.now();
+ return tokens;
+ });
+ });
+}
+
+function refreshTokenRequest(tokens) {
+ const data = new FormData();
+ data.append('client_id', genClientId());
+ data.append('grant_type', 'refresh_token');
+ data.append('refresh_token', tokens.refresh_token);
+ return fetch('/auth/token', {
+ credentials: 'same-origin',
+ method: 'POST',
+ body: data,
+ }).then((resp) => {
+ if (!resp.ok) throw new Error('Unable to fetch tokens');
+ return resp.json().then((newTokens) => {
+ newTokens.expires = (newTokens.expires_in * 1000) + Date.now();
+ return newTokens;
+ });
+ });
+}
+
+export function resolveCode(code) {
+ return fetchTokenRequest(code).then((tokens) => {
+ storeTokens(tokens);
+ history.replaceState(null, null, location.pathname);
+ return tokens;
+ }, (err) => {
+ // eslint-disable-next-line
+ console.error('Resolve token failed', err);
+ alert('Unable to fetch tokens');
+ redirectLogin();
+ });
+}
+
+
+export function refreshToken() {
+ const tokens = loadTokens();
+
+ if (tokens === null) {
+ return redirectLogin();
+ }
+
+ return refreshTokenRequest(tokens).then((accessTokenResp) => {
+ const newTokens = Object.assign({}, tokens, accessTokenResp);
+ storeTokens(newTokens);
+ return newTokens;
+ }, () => redirectLogin());
+}
diff --git a/src/common/auth/token_storage.js b/src/common/auth/token_storage.js
new file mode 100644
index 0000000000..e894f55bb8
--- /dev/null
+++ b/src/common/auth/token_storage.js
@@ -0,0 +1,45 @@
+const storage = window.localStorage || {};
+
+// So that core.js and main app hit same shared object.
+let tokenCache = window.__tokenCache;
+if (!tokenCache) {
+ tokenCache = window.__tokenCache = {
+ tokens: undefined,
+ writeEnabled: undefined,
+ };
+}
+
+export function askWrite() {
+ return tokenCache.writeEnabled === undefined;
+}
+
+export function storeTokens(tokens) {
+ tokenCache.tokens = tokens;
+ if (tokenCache.writeEnabled) {
+ try {
+ storage.tokens = JSON.stringify(tokens);
+ } catch (err) {} // eslint-disable-line
+ }
+}
+
+export function enableWrite() {
+ tokenCache.writeEnabled = true;
+ storeTokens(tokenCache.tokens);
+}
+
+export function loadTokens() {
+ if (tokenCache.tokens === undefined) {
+ try {
+ const tokens = storage.tokens;
+ if (tokens) {
+ tokenCache.tokens = JSON.parse(tokens);
+ tokenCache.writeEnabled = true;
+ } else {
+ tokenCache.tokens = null;
+ }
+ } catch (err) {
+ tokenCache.tokens = null;
+ }
+ }
+ return tokenCache.tokens;
+}
diff --git a/src/dialogs/ha-store-auth-card.js b/src/dialogs/ha-store-auth-card.js
new file mode 100644
index 0000000000..a497b74d23
--- /dev/null
+++ b/src/dialogs/ha-store-auth-card.js
@@ -0,0 +1,69 @@
+import '@polymer/paper-card/paper-card.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import { enableWrite } from '../common/auth/token_storage.js';
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+import '../resources/ha-style.js';
+
+class HaStoreAuth extends LocalizeMixin(PolymerElement) {
+ static get template() {
+ return html`
+
+
+
+ [[localize('ui.auth_store.ask')]]
+
+
+
[[localize('ui.auth_store.decline')]]
+
[[localize('ui.auth_store.confirm')]]
+