diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..9688eee
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,4 @@
+TOSHOKAN_BASE_URL=https://toshokan.dev.prolab.club/api
+OAUTH2_BASE_URL=https://oauth.dev.kurume-nct.com
+OAUTH2_CALLBACK_URL=http://127.0.0.1:9090/callback
+PROLAB_ACCOUNTS_CLIENT_ID=
diff --git a/components/Navigation.vue b/components/Navigation.vue
new file mode 100644
index 0000000..6ee0fa4
--- /dev/null
+++ b/components/Navigation.vue
@@ -0,0 +1,21 @@
+<template>
+  <nav class="nav">
+    <button class="button" @click="onClickLogin">
+      プロラボアカウントでログイン
+    </button>
+  </nav>
+</template>
+
+<script>
+export default {
+  methods: {
+    onClickLogin() {
+      this.$auth.loginWith('prolab');
+    },
+  },
+};
+</script>
+
+<style>
+
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 2f45459..d119818 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,20 @@
 <template>
   <div>
+    <navigation />
     <nuxt />
   </div>
 </template>
 
+<script>
+import Navigation from '~/components/Navigation.vue';
+
+export default {
+  components: {
+    Navigation,
+  },
+};
+</script>
+
 <style>
 html {
   font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
diff --git a/nuxt.config.js b/nuxt.config.js
index a0b1003..bbaf95b 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -1,3 +1,6 @@
+const filename = `.env.${process.env.NODE_ENV || 'local'}`;
+// eslint-disable-next-line import/no-extraneous-dependencies
+require('dotenv').config({ path: filename });
 
 export default {
   mode: 'universal',
@@ -28,6 +31,7 @@ export default {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    '~/plugins/toshokan-api-client.js',
   ],
   /*
   ** Nuxt.js dev-modules
@@ -35,22 +39,18 @@ export default {
   buildModules: [
     // Doc: https://github.com/nuxt-community/eslint-module
     '@nuxtjs/eslint-module',
+    ['@nuxtjs/dotenv', { filename }],
   ],
   /*
   ** Nuxt.js modules
   */
   modules: [
     // Doc: https://axios.nuxtjs.org/usage
-    '@nuxtjs/axios',
     '@nuxtjs/bulma',
+    '@nuxtjs/axios',
+    '@nuxtjs/auth',
   ],
   /*
-  ** Axios module configuration
-  ** See https://axios.nuxtjs.org/options
-  */
-  axios: {
-  },
-  /*
   ** Build configuration
   */
   build: {
@@ -79,4 +79,22 @@ export default {
       }
     },
   },
+  auth: {
+    strategies: {
+      prolab: {
+        _scheme: 'oauth2',
+        authorization_endpoint: `${process.env.OAUTH2_BASE_URL}/oauth2/auth`,
+        access_token_endpoint: `${process.env.OAUTH2_BASE_URL}/oauth2/token`,
+        userinfo_endpoint: false,
+        scope: ['openid', 'profile.read'],
+        access_type: 'offline',
+        response_type: 'code',
+        grant_type: 'authorization_code',
+        token_type: 'Bearer',
+        client_id: process.env.PROLAB_ACCOUNTS_CLIENT_ID,
+        token_key: 'access_token',
+        redirect_uri: process.env.OAUTH2_CALLBACK_URL,
+      },
+    },
+  },
 };
diff --git a/package-lock.json b/package-lock.json
index 637387b..01341d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1265,15 +1265,46 @@
         }
       }
     },
+    "@nuxtjs/auth": {
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/auth/-/auth-4.8.4.tgz",
+      "integrity": "sha512-47Y1nJSa9Ra/ltsduBY2XJ4hpi35+c4f1eGDO/0qV5z/4MJSLCmDf3f0xMzhrjDAfvutClz76RSty7QL9EVAqw==",
+      "requires": {
+        "@nuxtjs/axios": "^5.6.0",
+        "body-parser": "^1.19.0",
+        "consola": "^2.10.1",
+        "cookie": "^0.4.0",
+        "dotprop": "^1.2.0",
+        "is-https": "^1.0.0",
+        "js-cookie": "^2.2.1",
+        "lodash": "^4.17.15",
+        "nanoid": "^2.1.1"
+      },
+      "dependencies": {
+        "cookie": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+          "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+        }
+      }
+    },
     "@nuxtjs/axios": {
-      "version": "5.6.0",
-      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.6.0.tgz",
-      "integrity": "sha512-Rl4nnudm+sSkMtgfSEAeA5bq6aFpbBoYVXLXWaDxfydslukRd2SdEDdGv0gHE7F/jtIw+JfptWDHCHnzuoO/Ng==",
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/axios/-/axios-5.8.0.tgz",
+      "integrity": "sha512-1+I2mTUuydKkY/Jz1InpLpkGWpReO5USNWxZpPaQL3py4Kv3sDF83ll/uHGngosyXr+OKBXoALRLCjmwSY77lg==",
       "requires": {
         "@nuxtjs/proxy": "^1.3.3",
         "axios": "^0.19.0",
         "axios-retry": "^3.1.2",
-        "consola": "^2.10.1"
+        "consola": "^2.10.1",
+        "defu": "^0.0.3"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-0.0.3.tgz",
+          "integrity": "sha512-u/fe4fBwrD0KACvI0sYWTWFzooqONZq8ywPnK0ZkAgLNwaDTKpSWvMiiU4QmzhrQCXu8Y0+HIWP8amE18lsL4A=="
+        }
       }
     },
     "@nuxtjs/bulma": {
@@ -1284,6 +1315,16 @@
         "bulma": "^0.7.5"
       }
     },
+    "@nuxtjs/dotenv": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/dotenv/-/dotenv-1.4.1.tgz",
+      "integrity": "sha512-DpdObsvRwC8d89I9mzz6pBg6e/PEXHazDM57DOI1mmML2ZjHfQ/DvkjlSzUL7T+TnW3b/a4Ks5wQx08DqFBmeQ==",
+      "dev": true,
+      "requires": {
+        "consola": "^2.10.1",
+        "dotenv": "^8.1.0"
+      }
+    },
     "@nuxtjs/eslint-config": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@nuxtjs/eslint-config/-/eslint-config-1.1.2.tgz",
@@ -1915,31 +1956,10 @@
         "is-buffer": "^2.0.2"
       },
       "dependencies": {
-        "debug": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "follow-redirects": {
-          "version": "1.5.10",
-          "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
-          "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
-          "requires": {
-            "debug": "=3.1.0"
-          }
-        },
         "is-buffer": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz",
-          "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw=="
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.4.tgz",
+          "integrity": "sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A=="
         }
       }
     },
@@ -3365,11 +3385,18 @@
       "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0="
     },
     "debug": {
-      "version": "3.2.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-      "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+      "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
       "requires": {
-        "ms": "^2.1.1"
+        "ms": "2.0.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+        }
       }
     },
     "decode-uri-component": {
@@ -3549,6 +3576,17 @@
         "is-obj": "^1.0.0"
       }
     },
+    "dotenv": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz",
+      "integrity": "sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==",
+      "dev": true
+    },
+    "dotprop": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/dotprop/-/dotprop-1.2.0.tgz",
+      "integrity": "sha512-mVQb8y5u3UkzNua2Hc8Ut/uKyCjm9GG2MRk/0fxJ9Mxo8Nb8XyWqaP0wVXerMucmu0mQmlcZm3S1mjOdcbCwQA=="
+    },
     "duplexer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -4225,9 +4263,9 @@
       "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
     },
     "eventemitter3": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.2.tgz",
-      "integrity": "sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q=="
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
+      "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg=="
     },
     "events": {
       "version": "3.0.0",
@@ -4739,11 +4777,11 @@
       }
     },
     "follow-redirects": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.7.0.tgz",
-      "integrity": "sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==",
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
+      "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
       "requires": {
-        "debug": "^3.2.6"
+        "debug": "=3.1.0"
       }
     },
     "for-in": {
@@ -5228,11 +5266,11 @@
       }
     },
     "http-proxy": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.17.0.tgz",
-      "integrity": "sha512-Taqn+3nNvYRfJ3bGvKfBSRwy1v6eePlm3oc/aWVxZp57DQr5Eq3xhKJi7Z4hZpS8PC3H4qI+Yly5EmFacGuA/g==",
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
+      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
       "requires": {
-        "eventemitter3": "^3.0.0",
+        "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
         "requires-port": "^1.0.0"
       }
@@ -5564,6 +5602,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-https": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-https/-/is-https-1.0.0.tgz",
+      "integrity": "sha512-1adLLwZT9XEXjzhQhZxd75uxf0l+xI9uTSFaZeSESjL3E1eXSPpO+u5RcgqtzeZ1KCaNvtEwZSTO2P4U5erVqQ=="
+    },
     "is-number": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
@@ -5619,9 +5662,9 @@
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
     "is-retry-allowed": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz",
-      "integrity": "sha1-EaBgVotnM5REAz0BJaYaINVk+zQ="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
+      "integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg=="
     },
     "is-stream": {
       "version": "2.0.0",
@@ -5688,6 +5731,11 @@
         }
       }
     },
+    "js-cookie": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
+      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -6337,6 +6385,11 @@
       "integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg==",
       "optional": true
     },
+    "nanoid": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.6.tgz",
+      "integrity": "sha512-2NDzpiuEy3+H0AVtdt8LoFi7PnqkOnIzYmJQp7xsEU6VexLluHQwKREuiz57XaQC5006seIadPrIZJhyS2n7aw=="
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
diff --git a/package.json b/package.json
index 5a56734..1e533ae 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,15 @@
     "lint-fix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
   },
   "dependencies": {
-    "@nuxtjs/axios": "^5.3.6",
+    "@nuxtjs/auth": "^4.8.4",
+    "@nuxtjs/axios": "^5.8.0",
     "@nuxtjs/bulma": "^1.2.4",
+    "axios": "^0.19.0",
     "jsqr": "^1.2.0",
     "nuxt": "^2.10.2"
   },
   "devDependencies": {
+    "@nuxtjs/dotenv": "^1.4.1",
     "@nuxtjs/eslint-config": "^1.0.1",
     "@nuxtjs/eslint-module": "^1.0.0",
     "babel-eslint": "^10.0.1",
diff --git a/plugins/toshokan-api-client.js b/plugins/toshokan-api-client.js
new file mode 100644
index 0000000..0bd6536
--- /dev/null
+++ b/plugins/toshokan-api-client.js
@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+export default (_, inject) => {
+  inject('toshokanClient', axios.create({
+    baseURL: process.env.TOSHOKAN_BASE_URL,
+  }));
+};
diff --git a/store/dummy.js b/store/dummy.js
new file mode 100644
index 0000000..e69de29