diff --git a/scipost/forms.py b/scipost/forms.py
index 6c5e19c21992dbfab0e3bae53cdcf8f688f8082b..66ed253ad417092b61d298f825a46c326b30de2b 100644
--- a/scipost/forms.py
+++ b/scipost/forms.py
@@ -3,6 +3,7 @@ __license__ = "AGPL v3"
 
 
 import datetime
+import pyotp
 
 from django import forms
 from django.contrib.auth.models import User, Group
@@ -348,6 +349,21 @@ class TOTPDeviceForm(forms.Form):
     token = forms.CharField()
     key = forms.CharField(widget=forms.HiddenInput(), required=True)
 
+    def __init__(self, *args, **kwargs):
+        self.current_user = kwargs.pop('current_user')
+        super().__init__(*args, **kwargs)
+        self.initial['key'] = 'JBSWY3DPEHPK3PXP'
+
+    @property
+    def secret_key(self):
+        if hasattr(self, 'cleaned_data') and 'key' in self.cleaned_data:
+            return self.cleaned_data.get('key')
+        return self.initial['key']
+
+    def get_QR_data(self):
+        return pyotp.totp.TOTP(self.secret_key).provisioning_uri(
+            self.current_user.email, issuer_name="SciPost")
+
 
 AUTHORSHIP_CLAIM_CHOICES = (
     ('-', '-'),
diff --git a/scipost/static/scipost/assets/js/scripts.js b/scipost/static/scipost/assets/js/scripts.js
index 24ed0c9bd8d2a279d5c8a61082139d5f327b35e3..e8ecb3b021d7008cf4a32922012c6a2eb2193559 100644
--- a/scipost/static/scipost/assets/js/scripts.js
+++ b/scipost/static/scipost/assets/js/scripts.js
@@ -1,7 +1,7 @@
 require('jquery-ui/ui/widgets/sortable');
 require('jquery-ui/ui/disable-selection');
-var QRCode = require('qrcode');
 
+import QRCode from 'qrcode';
 import notifications from './notifications.js';
 
 function hide_all_alerts() {
@@ -20,9 +20,15 @@ var activate_qr = function() {
     $.each($('[data-toggle="qr"]'), function(index, value) {
         var el = $(value);
         console.log(el.data('qr-value'));
-        QRCode.toCanvas(el, el.data('qr-value'), function(err) {
-            console.log(err);
-        })
+        // var str;
+        QRCode.toDataURL(el.data('qr-value'), function(err, url) {
+            el.attr({src: url});
+        });
+        // console.log(str);
+        // el.attr({src: str});
+        // QRCode.toCanvas(el, el.data('qr-value'), function(err) {
+        //     console.log(err);
+        // })
     });
 };
 
diff --git a/scipost/templates/scipost/totpdevice_form.html b/scipost/templates/scipost/totpdevice_form.html
index 6725b7c11089b4824762b5879b6d33dcfd458346..4c1fb3ff3cf00cd73afded04eb91f951277d85e1 100644
--- a/scipost/templates/scipost/totpdevice_form.html
+++ b/scipost/templates/scipost/totpdevice_form.html
@@ -31,7 +31,7 @@
         <p>
             Enter the security code generated by your mobile authenticator app to make sure it’s configured correctly.
         </p>
-        <canvas id="qr" data-toggle="qr" data-qr-value="blabla"></canvas>
+        <img id="qr" data-toggle="qr" data-qr-value="{{ form.get_QR_data }}">
         <!-- <script>
           (function() {
             var qr = new QRious({
diff --git a/scipost/views.py b/scipost/views.py
index 5ef1df8e766c1be6fa493ea38d5b0ce43867451d..a06c85161a9e51e313d8eb57df5e0aa99eb399aa 100644
--- a/scipost/views.py
+++ b/scipost/views.py
@@ -891,6 +891,11 @@ class TOTPDeviceCreateView(FormView):
     template_name = 'scipost/totpdevice_form.html'
     success_url = reverse_lazy('scipost:totp')
 
+    def get_form_kwargs(self):
+        kwargs = super().get_form_kwargs()
+        kwargs['current_user'] = self.request.user
+        return kwargs
+
 
 class TOTPDeviceDeleteView(DeleteView):
     pk_url_kwarg = 'device_id'