Exploring the possibilities of integrating Keycloak with the powerful nuxt-auth

I am incorporating this particular authentication module in conjunction with Keycloak.

In my nuxt.config.js configuration:

keycloak: {
    _scheme: 'oauth2',
    client_id: 'client-bo',
    userinfo_endpoint: 'SERVER/protocol/openid-connect/userinfo',
    authorization_endpoint: 'SERVER/protocol/openid-connect/auth',
    //userinfo_endpoint: false,
    access_type: 'offline',
    access_token_endpoint: 'SERVER/protocol/openid-connect/token',
    //response_type: 'code',
    response_type: 'token id_token',
    token_type: 'Bearer',
    token_key: 'access_token',
    scope: ['openid', 'profile', 'email'],
    redirect_uri: 'http://127.0.0.1:3000/'        
}

The connection has been established successfully.

Upon clicking the "connect" button, I am redirected to the Keycloak environment. After authenticating through Keycloak, I get redirected back to my nuxt.js application.

Yet, the issue arises as my store remains empty. Any insights on what might be causing this concern?

loggedIn: always shows false

user: consistently displays null

Any thoughts on why it's not functioning correctly?

javascriptvue.jsoauth-2.0nuxt.jskeycloak

Answer №1

I encountered a similar problem before, but I managed to resolve it by configuring the following setup:

package.json

 "@nuxtjs/auth-next": "5.0.0-1607534757.1122b76"

nuxt-config.json

auth: {
keycloak: {
    scheme: 'oauth2',
    endpoints: {
        authorization: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/auth`,
        userInfo: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/userinfo`,
        token: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/token`,
        logout: `${process.env.KEYCLOAK_HOST}/auth/realms/${process.env.KEYCLOAK_REALM}/protocol/openid-connect/logout?redirect_uri=` + encodeURIComponent(String(process.env.HOME_URI))
    },
    token: {
        property: 'access_token',
        type: 'Bearer',
        name: 'Authorization',
        maxAge: 1800 // Can be dynamic ?
    },
    refreshToken: {
        property: 'refresh_token',
        maxAge: 60 * 60 * 24 * 30 // Can be dynamic ? 
    },
    responseType: 'code',
    grantType: 'authorization_code',
    clientId: process.env.KEYCLOAK_CLIENT_ID,
    scope: ['openid', 'profile', 'email'],
    codeChallengeMethod: 'S256',
},
    redirect: {
        logout: '/',
        callback: '/',
        home: '/dashboard'
    },
}

Login function:

 login() {
  this.$auth.loginWith("keycloak");
},

Although there were GitHub reports of issues with the Nuxt Auth module, I was able to make it function properly using this configuration. Hopefully, this will assist others facing similar challenges.

Answer №2

Dealing with a comparable issue, I found that disabling local auth was the solution for me as well. In my Nuxt configuration file, I made sure to include the following setting:

auth: {
    strategies: {
      local: false,
      keycloak: {...}

I hope this information is helpful. It's worth noting that you may also need to include the auth middleware on the page you are redirecting to.

Answer №3

Perhaps utilizing the Vuex store option could be beneficial in this situation:

        watchLoggedIn: true,
        resetOnError: true,
        redirect: {
          login: '/login',
          logout: '/',
          callback: '/login',
          home: '/welcome'
        },
        vuex: {
          namespace: 'auth'
        },
        strategies: {
          keycloak: {
            _scheme: 'oauth2',
            authorization_endpoint: ...

Which version of Nuxt Auth are you currently using? It would seem important to ensure that your store is correctly configured and able to retrieve values for other elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The function seems to be malfunctioning or missing

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $('div'); // <--- THIS DOESN'T WORK </script> An issue has been encountere ...

javascriptjquery

Check for equality with an array of objects when reacting to changes

I have an input field and an array of objects. I want the object with a property named "airplaneCompany" to be displayed as I type. Each character should be checked, and if the object's "airplaneCompany" property starts with 'a', it should b ...

javascriptreactjsarraysobjectonchange

Tailored Filtering and Sorting Features for Material Table

In the table, there is a column labeled Active which contains data represented as 1 or 0 for active and inactive states. Instead of displaying the values as 1 or 0, a function called generateFlagText uses the render prop to show an MUI Chip component base ...

javascriptreactjsmaterial-uimaterial-table

Is there a way to deactivate a clickable div immediately after it has been clicked on?

I have been searching for a solution to this particular question on different platforms, including Stack Overflow. However, I am looking for an answer using pure JavaScript only, so please avoid jQuery solutions. In order to provide context, I have includ ...

javascripthtmlcss

Tips for accurately measuring the height of a single table cell

I am facing an issue with a table that I have set up. Here is the code: <table> <tr> <td id='tdleftcontent' style='border:1px solid red;'> <asp:Label ID='lbl' runat="server"></asp:Label> < ...

javascriptasp.net

Binding Events to Elements within an AngularJS-powered User Interface using a LoopIterator

I am working with an Array of Objects in AngularJS that includes: EmployeeComments ManagerComments ParticipantsComments. [{ "id": "1", "title": "Question1", "ManagerComment": "This was a Job Wel Done", "EmployeeComment": "Wow I am Surprised", ...

javascriptangularjs

I need help figuring out how to navigate between different pages in my Vue-cli app that has multiple pages configured

After following the guide on https://cli.vuejs.org/config/#pages, I successfully configured vue-cli3 to build a multiple page application. My project consists of 2 static pages, and I set up the vue.config.js file as shown below. However, when running the ...

javascriptvue.jsvue-cli-3

Implementing custom validation in React to dynamically enable/disable buttons

I am working on a basic form that includes 3 input fields and one submit button. The submit button is initially disabled, and each input field has its own custom validation logic using regex. I am looking for a way to enable the button only when all the ...

javascriptreactjsantd

Flow - secure actions to ensure type safety

Currently implementing flow and looking to enhance the type safety of my reducers. I stumbled upon a helpful comment proposing a solution that seems compatible with my existing codebase: https://github.com/reduxjs/redux/issues/992#issuecomment-191152574 I ...

javascripttypescriptreduxflowtypetype-safety

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Should I use Mongoose schema methods or prototype functions?

I am curious about the functionality of functions and ES6 classes in relation to new objects created from a mongoose schema. I wonder if the functions are duplicated for each new object and what the best approach is when utilizing ES6 classes. To illustrat ...

javascriptnode.jsmongoose-schema

Is it possible to verify age on a date field in vanilla JavaScript?

How can I validate the age on a date input field? If someone is 18 or older, they will be valid. Otherwise, an error message should be displayed. Can you help me with this? ...

javascriptdatevalidation

Discover the secrets of flying to customized coordinates stored in variables using Leaflet.js

I'm currently working on a fire location tracking website and I'm facing an issue with leaflet.js. As a newcomer to Leaflet, any assistance would be greatly appreciated! I have a script that successfully retrieves the id of a specific row from a ...

javascriptleaflet

Ways to provide input parameters to a method upon clicking an element without using the HTML onclick attribute

Is there a way to pass data between pages without redirecting to the next.php page every time a button is clicked? One suggestion is to remove the onclick attribute from the button: <button class="submit-btn"></button> and use this jQuery fu ...

javascriptphpjqueryajax

I am having trouble comprehending this JavaScript code, could someone provide me with assistance?

Currently delving into the world of JavaScript functions and stumbled upon this code snippet with the following output: Output: "buy 3 bottles of milk" "Hello master, here is your 0 change" function getMilk(money, costPerBottle) { ...

javascript

What is the best way to include rxjs in an npm library - as a dependency, peer dependency, or both?

After researching numerous posts and articles on dependencies versus peerDependencies, I am still not entirely certain what to do in my particular situation.... I have a library (which is published to a private npm repository) that utilizes rxjs; for exam ...

javascriptangularnpmrxjs

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

javascripthtmlcss

Encountering a Hydration Error with Next.JS and MDX-Bundler when a MDX Component Adds Extra New Lines to its Children

Currently, I am incorporating next.js + mdx-bundler into my project. There is a simple component that I frequently use in my mdx files. Everything runs smoothly with the following code: Mdx is a great <Component>format and I like it a lot</Compon ...

javascriptreactjsnext.jsmdxjshydration

Creating a well-aligned form using Material-UI

Exploring Material-UI for the first time! How can a form be built where certain fields are arranged horizontally, others stacked vertically, and all aligned perfectly both vertically and horizontally? Check out this example image: I've created simila ...

javascripthtmlcssreactjsmaterial-ui

Guide on extracting the text from the <script> tag using python

I'm attempting to extract the script element content from a generic website using Selenium. <script>...</script> . url = 'https://unminify.com/' browser.get(url) elements = browser.find_elements_by_xpath('/html/body/script[ ...

javascriptpythonselenium