diff --git a/.changelog/10901.txt b/.changelog/10901.txt
new file mode 100644
index 000000000..4a00a7da1
--- /dev/null
+++ b/.changelog/10901.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Properly encode non-URL safe characters in OIDC responses
+```
diff --git a/ui/packages/consul-ui/app/components/token-source/index.hbs b/ui/packages/consul-ui/app/components/token-source/index.hbs
index e83e5da07..6bedcd930 100644
--- a/ui/packages/consul-ui/app/components/token-source/index.hbs
+++ b/ui/packages/consul-ui/app/components/token-source/index.hbs
@@ -25,7 +25,14 @@
     </State>
     <State @matches="token">
       <DataSource
-        @src={{concat path '/oidc/authorize/' provider.Name '/' jwt.authorizationCode '/' jwt.authorizationState}}
+        @src={{uri
+          (concat path '/oidc/authorize/${provider}/${code}/${state}')
+            (hash
+              provider=provider.Name
+              code=jwt.authorizationCode
+              state=(or jwt.authorizationState '')
+            )
+        }}
         @onchange={{action 'change'}}
         @onerror={{action onerror}}
       />
diff --git a/ui/packages/consul-ui/app/services/repository/oidc-provider.js b/ui/packages/consul-ui/app/services/repository/oidc-provider.js
index c89522665..85d6d2926 100644
--- a/ui/packages/consul-ui/app/services/repository/oidc-provider.js
+++ b/ui/packages/consul-ui/app/services/repository/oidc-provider.js
@@ -8,7 +8,7 @@ const modelName = 'oidc-provider';
 const OAUTH_PROVIDER_NAME = 'oidc-with-url';
 export default class OidcProviderService extends RepositoryService {
   @service('torii') manager;
-  @service('repository/settings') settings;
+  @service('settings') settings;
 
   init() {
     super.init(...arguments);
diff --git a/ui/packages/consul-ui/tests/unit/services/repository/oidc-provider-test.js b/ui/packages/consul-ui/tests/unit/services/repository/oidc-provider-test.js
new file mode 100644
index 000000000..8164fbbcf
--- /dev/null
+++ b/ui/packages/consul-ui/tests/unit/services/repository/oidc-provider-test.js
@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Repository | oidc-provider', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let service = this.owner.lookup('service:repository/oidc-provider');
+    assert.ok(service);
+  });
+});