[FEAT] Auth, Login, OAuth, create account with username and password #1653 (#2092)

no more superuser url!
delete cookie on logout
add usr login feature
fix node management
* Cleaned up login form
* CreateUser
* information leak
* cleaner parsing usr from url
* rename decorators
* login secret
* fix: add back `superuser` command
* chore: remove `fastapi_login`
* fix: extract `token` from cookie
* chore: prepare to extract user
* feat: check user
* chore: code clean-up
* feat: happy flow working
* fix: usr only login
* fix: user already logged in
* feat: check user in URL
* fix: verify password at DB level
* fix: do not show `Login` controls if user already logged in
* fix: separate login endpoints
* fix: remove `usr` param
* chore: update error message
* refactor: register method
* feat: logout
* chore: move comments
* fix: remove user auth check from API
* fix: user check unnecessary
* fix: redirect after logout
* chore: remove garbage files
* refactor: simplify constructor call
* fix: hide user icon if not authorized
* refactor: rename auth env vars
* chore: code clean-up
* fix: add types for `python-jose`
* fix: add types for `passlib`
* fix: return type
* feat: set default value for `auth_secret_key` to hash of super user
* fix: default value
* feat: rework login page
* feat: ui polishing
* feat: google auth
* feat: add google auth
* chore: remove `authlib` dependency
* refactor: extract `_handle_sso_login` method
* refactor: convert methods to `properties`
* refactor: rename: `user_api` to `auth_api`
* feat: store user info from SSO
* chore: re-arange the buttons
* feat: conditional rendering of login options
* feat: correctly render buttons
* fix: re-add `Claim Bitcoin` from the main page
* fix: create wallet must send new user
* fix:  no `username-password` auth method
* refactor: rename auth method
* fix: do not force API level UUID4 validation
* feat: add validation for username
* feat: add account page
* feat: update account
* feat: add `has_password` for user
* fix: email not editable
* feat: validate email for existing account
* fix: register check
* feat: reset password
* chore: code clean-up
* feat: handle token expired
* fix: only redirect if `text/html`
* refactor: remove `OAuth2PasswordRequestForm`
* chore: remove `python-multipart` dependency
* fix: handle no headers for exception
* feat: add back button on error screen
* feat: show user profile image
* fix: check account creation permissions
* fix: auth for internal api call
* chore: add some docs
* chore: code clean-up
* fix: rebase stuff
* fix: default value types
* refactor: customize error messages
* fix: move types libs to dev dependencies
* doc: specify the `Authorization callback URL`
* fix: pass missing superuser id in node ui test
* fix: keep usr param on wallet redirect
removing usr param causes an issue if the browser doesnt yet have an access token.
* fix: do not redirect if `wal` query param not present
* fix: add nativeBuildInputs and buildInputs overrides to flake.nix
* bump fastapi-sso to 0.9.0 which fixes some security issues
* refactor: move the `lnbits_admin_extensions` to decorators
* chore: bring package config from `dev`
* chore: re-add dependencies
* chore: re-add cev dependencies
* chore: re-add mypy ignores
* feat: i18n
* refactor: move admin ext check to decorator (fix after rebase)
* fix: label mapping
* fix: re-fetch user after first wallet was created
* fix: unlikely case that `user` is not found
* refactor translations (move '*' to code)
* reorganize deps in pyproject.toml, add comment
* update flake.lock and simplify flake.nix after upstreaming
overrides for fastapi-sso, types-passlib, types-pyasn1, types-python-jose
were upstreamed in https://github.com/nix-community/poetry2nix/pull/1463
* fix: more relaxed email verification (by @prusnak)
* fix: remove `\b` (boundaries) since we re using `fullmatch`
* chore: `make bundle`

---------

Co-authored-by: dni ⚡ <office@dnilabs.com>
Co-authored-by: Arc <ben@arc.wales>
Co-authored-by: jackstar12 <jkranawetter05@gmail.com>
Co-authored-by: Pavol Rusnak <pavol@rusnak.io>

lnbits/static/js/account.js

@@ -0,0 +1,80 @@
+new Vue({
+  el: '#vue',
+  mixins: [windowMixin],
+  data: function () {
+    return {
+      user: null,
+      hasUsername: false,
+      passwordData: {
+        show: false,
+        oldPassword: null,
+        newPassword: null,
+        newPasswordRepeat: null
+      }
+    }
+  },
+  methods: {
+    updateAccount: async function () {
+      try {
+        const {data} = await LNbits.api.request(
+          'PUT',
+          '/api/v1/auth/update',
+          null,
+          {
+            user_id: this.user.id,
+            username: this.user.username,
+            email: this.user.email,
+            config: this.user.config
+          }
+        )
+        this.user = data
+        this.$q.notify({
+          type: 'positive',
+          message: 'Account updated.'
+        })
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    updatePassword: async function () {
+      try {
+        const {data} = await LNbits.api.request(
+          'PUT',
+          '/api/v1/auth/password',
+          null,
+          {
+            user_id: this.user.id,
+            password_old: this.passwordData.oldPassword,
+            password: this.passwordData.newPassword,
+            password_repeat: this.passwordData.newPasswordRepeat
+          }
+        )
+        this.user = data
+        this.passwordData.show = false
+        this.$q.notify({
+          type: 'positive',
+          message: 'Password updated.'
+        })
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    showChangePassword: function () {
+      this.passwordData = {
+        show: true,
+        oldPassword: null,
+        newPassword: null,
+        newPasswordRepeat: null
+      }
+    }
+  },
+  created: async function () {
+    try {
+      const {data} = await LNbits.api.getAuthenticatedUser()
+      this.user = data
+      this.hasUsername = !!data.username
+    } catch (e) {
+      LNbits.utils.notifyApiError(e)
+    }
+  }
+})

lnbits/static/js/admin.js

@@ -175,7 +175,7 @@ new Vue({
     },
     restartServer() {
       LNbits.api
-        .request('GET', '/admin/api/v1/restart/?usr=' + this.g.user.id)
+        .request('GET', '/admin/api/v1/restart/')
         .then(response => {
           this.$q.notify({
             type: 'positive',
@@ -192,7 +192,7 @@ new Vue({
       LNbits.api
         .request(
           'PUT',
-          '/admin/api/v1/topup/?usr=' + this.g.user.id,
+          '/admin/api/v1/topup/',
           this.g.user.wallets[0].adminkey,
           this.wallet
         )
@@ -229,11 +229,7 @@ new Vue({
     },
     getAudit() {
       LNbits.api
-        .request(
-          'GET',
-          '/admin/api/v1/audit/?usr=' + this.g.user.id,
-          this.g.user.wallets[0].adminkey
-        )
+        .request('GET', '/admin/api/v1/audit/', this.g.user.wallets[0].adminkey)
         .then(response => {
           this.auditData = response.data
         })
@@ -245,7 +241,7 @@ new Vue({
       LNbits.api
         .request(
           'GET',
-          '/admin/api/v1/settings/?usr=' + this.g.user.id,
+          '/admin/api/v1/settings/',
           this.g.user.wallets[0].adminkey
         )
         .then(response => {
@@ -266,7 +262,7 @@ new Vue({
       LNbits.api
         .request(
           'PUT',
-          '/admin/api/v1/settings/?usr=' + this.g.user.id,
+          '/admin/api/v1/settings/',
           this.g.user.wallets[0].adminkey,
           data
         )
@@ -294,7 +290,7 @@ new Vue({
         .confirmDialog('Are you sure you want to restore settings to default?')
         .onOk(() => {
           LNbits.api
-            .request('DELETE', '/admin/api/v1/settings/?usr=' + this.g.user.id)
+            .request('DELETE', '/admin/api/v1/settings/')
             .then(response => {
               this.$q.notify({
                 type: 'positive',
@@ -310,7 +306,7 @@ new Vue({
         })
     },
     downloadBackup() {
-      window.open('/admin/api/v1/backup/?usr=' + this.g.user.id, '_blank')
+      window.open('/admin/api/v1/backup/', '_blank')
     }
   }
 })

lnbits/static/js/base.js

@@ -69,6 +69,41 @@ window.LNbits = {
         name: name
       })
     },
+    register: function (username, email, password, password_repeat) {
+      return axios({
+        method: 'POST',
+        url: '/api/v1/auth/register',
+        data: {
+          username,
+          email,
+          password,
+          password_repeat
+        }
+      })
+    },
+    login: function (username, password) {
+      return axios({
+        method: 'POST',
+        url: '/api/v1/auth',
+        data: {username, password}
+      })
+    },
+    loginUsr: function (usr) {
+      return axios({
+        method: 'POST',
+        url: '/api/v1/auth/usr',
+        data: {usr}
+      })
+    },
+    logout: function () {
+      return axios({
+        method: 'POST',
+        url: '/api/v1/auth/logout'
+      })
+    },
+    getAuthenticatedUser: function () {
+      return this.request('get', '/api/v1/auth')
+    },
     getWallet: function (wallet) {
       return this.request('get', '/api/v1/wallet', wallet.inkey)
     },
@@ -76,7 +111,7 @@ window.LNbits = {
       return this.request('post', '/api/v1/wallet', wallet.adminkey, {
         name: name
       }).then(res => {
-        window.location = '/wallet?usr=' + res.data.user + '&wal=' + res.data.id
+        window.location = '/wallet?wal=' + res.data.id
       })
     },
     updateWallet: function (name, wallet) {
@@ -200,7 +235,7 @@ window.LNbits = {
       newWallet.fsat = new Intl.NumberFormat(window.LOCALE).format(
         newWallet.sat
       )
-      newWallet.url = ['/wallet?usr=', data.user, '&wal=', data.id].join('')
+      newWallet.url = `/wallet?&wal=${data.id}`
       return newWallet
     },
     payment: function (data) {
@@ -385,6 +420,12 @@ window.windowMixin = {
     }
   },
 
+  computed: {
+    isUserAuthorized() {
+      return this.$q.cookies.get('is_lnbits_user_authorized')
+    }
+  },
+
   methods: {
     activeLanguage: function (lang) {
       return window.i18n.locale === lang
@@ -409,9 +450,36 @@ window.windowMixin = {
           position: position || 'bottom'
         })
       })
+    },
+    checkUsrInUrl: async function () {
+      const params = new URLSearchParams(window.location.search)
+      const usr = params.get('usr')
+      if (!usr) {
+        return
+      }
+
+      if (!this.isUserAuthorized) {
+        await LNbits.api.loginUsr(usr)
+      }
+      params.delete('usr')
+      const cleanQueryPrams = params.size ? `?${params.toString()}` : ''
+
+      window.history.replaceState(
+        {},
+        document.title,
+        window.location.pathname + cleanQueryPrams
+      )
+    },
+    logout: async function () {
+      try {
+        await LNbits.api.logout()
+        window.location = '/'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
     }
   },
-  created: function () {
+  created: async function () {
     if (
       this.$q.localStorage.getItem('lnbits.darkMode') == true ||
       this.$q.localStorage.getItem('lnbits.darkMode') == false
@@ -494,6 +562,8 @@ window.windowMixin = {
       )
 
       this.g.extensions = extensions
+
+      await this.checkUsrInUrl()
     }
   }
 }

lnbits/static/js/components.js

@@ -116,7 +116,7 @@ Vue.component('lnbits-extension-list', {
       <q-item v-for="extension in userExtensions" :key="extension.code"
         clickable
         :active="extension.isActive"
-        tag="a" :href="[extension.url, '?usr=', user.id].join('')">
+        tag="a" :href="extension.url">
         <q-item-section side>
           <q-avatar size="md">
             <q-img
@@ -181,7 +181,7 @@ Vue.component('lnbits-manage', {
     <q-list v-if="user" dense class="lnbits-drawer__q-list">
       <q-item-label header v-text="$t('manage')"></q-item-label>
       <div v-if="user.admin">
-        <q-item v-if='showAdmin' clickable tag="a" :href="['/admin?usr=', user.id].join('')">
+        <q-item v-if='showAdmin' clickable tag="a" href="/admin">
           <q-item-section side>
             <q-icon name="admin_panel_settings" color="grey-5" size="md"></q-icon>
           </q-item-section>
@@ -189,7 +189,7 @@ Vue.component('lnbits-manage', {
             <q-item-label lines="1" class="text-caption" v-text="$t('server')"></q-item-label>
           </q-item-section>
         </q-item>
-        <q-item v-if='showNode' clickable tag="a" :href="['/node?usr=', user.id].join('')">
+        <q-item v-if='showNode' clickable tag="a" href="/node">
           <q-item-section side>
             <q-icon name="developer_board" color="grey-5" size="md"></q-icon>
           </q-item-section>
@@ -198,7 +198,7 @@ Vue.component('lnbits-manage', {
           </q-item-section>
         </q-item>
       </div>
-      <q-item clickable tag="a" :href="['/extensions?usr=', user.id].join('')">
+      <q-item clickable tag="a" href="/extensions">
         <q-item-section side>
           <q-icon name="extension" color="grey-5" size="md"></q-icon>
         </q-item-section>

lnbits/static/js/index.js

@@ -8,15 +8,72 @@ new Vue({
         data: {},
         description: ''
       },
-      walletName: ''
+      authAction: 'login',
+      authMethod: 'username-password',
+      usr: '',
+      username: '',
+      email: '',
+      password: '',
+      passwordRepeat: '',
+      walletName: '',
+      signup: false
     }
   },
   computed: {
     formatDescription() {
       return LNbits.utils.convertMarkdown(this.description)
+    },
+    isUserAuthorized() {
+      return this.$q.cookies.get('is_lnbits_user_authorized')
+    },
+    isAccessTokenExpired() {
+      return this.$q.cookies.get('is_access_token_expired')
     }
   },
   methods: {
+    showLogin: function (authMethod) {
+      this.authAction = 'login'
+      this.authMethod = authMethod
+    },
+    showRegister: function (authMethod) {
+      this.user = ''
+      this.username = null
+      this.password = null
+      this.passwordRepeat = null
+
+      this.authAction = 'register'
+      this.authMethod = authMethod
+    },
+    register: async function () {
+      try {
+        await LNbits.api.register(
+          this.username,
+          this.email,
+          this.password,
+          this.passwordRepeat
+        )
+        window.location.href = '/wallet'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    login: async function () {
+      try {
+        await LNbits.api.login(this.username, this.password)
+        window.location.href = '/wallet'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    },
+    loginUsr: async function () {
+      try {
+        await LNbits.api.loginUsr(this.usr)
+        this.usr = ''
+        window.location.href = '/wallet'
+      } catch (e) {
+        LNbits.utils.notifyApiError(e)
+      }
+    },
     createWallet: function () {
       LNbits.api.createAccount(this.walletName).then(res => {
         window.location = '/wallet?usr=' + res.data.user + '&wal=' + res.data.id
@@ -28,9 +85,19 @@ new Vue({
         message: 'Processing...',
         icon: null
       })
+    },
+    validateUsername: function (val) {
+      const usernameRegex = new RegExp(
+        '^(?=[a-zA-Z0-9._]{2,20}$)(?!.*[_.]{2})[^_.].*[^_.]$'
+      )
+      return usernameRegex.test(val)
     }
   },
   created() {
     this.description = SITE_DESCRIPTION
+
+    if (this.isUserAuthorized) {
+      window.location.href = '/wallet'
+    }
   }
 })

lnbits/static/js/service-worker.js

@@ -1,6 +1,6 @@
 // update cache version every time there is a new deployment
 // so the service worker reinitializes the cache
-const CACHE_VERSION = 86
+const CACHE_VERSION = 88
 const CURRENT_CACHE = `lnbits-${CACHE_VERSION}-`
 
 const getApiKey = request => {

lnbits/static/js/wallet.js

@@ -350,7 +350,7 @@ new Vue({
       LNbits.api
         .request(
           'PUT',
-          '/admin/api/v1/topup/?usr=' + this.g.user.id,
+          '/admin/api/v1/topup/',
           this.g.user.wallets[0].adminkey,
           {
             amount: credit,