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

Creating a customized component using unique styles in Material UI version 1

Currently, I am facing a challenge in styling my Card component with a width of 75 pixels while using Redux and Material UI V1. Despite following the example provided by Material UI on custom styling through withStyles and connect, I have not been able to ...

javascriptreactjsreduxreact-reduxmaterial-ui

Error encountered in Vue code, lacks default export on Editor Terminal

I'm not experiencing any issues in the browser, I am getting the desired output. However, why does this keep showing up in the editor terminal? Any assistance would be greatly appreciated. Error - No Default Export: The module "/vue3/src/components/ ...

javascripttypescriptvue.js

Experience seamless navigation with Highstock's fluid panning feature

I'm attempting to achieve seamless panning on a basic highstock chart by clicking and dragging within the plot area. Interestingly, I have found that this works flawlessly when my data is not based on timestamps: data: [-25.1,-23.8,-19.9,-19.1,-19.1 ...

javascripthighcharts

Connecting Mailchimp with WordPress without using a plugin can lead to a Bad Request 400 error when trying to

I'm attempting to connect with Mailchimp using an Ajax request without relying on a plugin, but I keep encountering a 400 bad request error. The code provided below utilizes vanilla JS for Ajax and the function required for integration with Mailchimp. ...

javascriptphpajaxwordpressmailchimp

Using TypeScript to Add Items to a Sorted Set in Redis

When attempting to insert a value into a sorted set in Redis using TypeScript with code like client.ZADD('test', 10, 'test'), an error is thrown Error: Argument of type '["test", 10, "test"]' is not assigna ...

javascriptnode.jstypescriptredisnode-redis

Tips for managing the onloadedmetadata event

If a video file cannot be played by the browser due to format or codec issues, I want to notify the user about it. When the browser is unable to play a video (because of unsupported format or codec), the onloadedmetadata event does not occur. I have some ...

javascripthtmlvideodom-events

Running a JS/JSON function in Snowflake that results in a syntax error

Can anyone help me troubleshoot the issue with the following function? I am receiving this error message: SQL compilation error: syntax error line 1 at position 0 unexpected 'function'. Should I be using JSON Script or Javascript for this? func ...

javascriptjsonsnowflake-cloud-data-platform

Issue with the Edit feature causing conflicts with the local storage and generating error messages

There seems to be an issue with my edit function that is causing it to override the local storage when I attempt to save and interfering with my delete function as well. I have searched through similar posts for a solution but have not been able to pinpo ...

javascriptreactjsreact-routerreact-hooks

Struggle arising from the clash between a customized image service and the built-in image element

Dealing with a custom Angular service called Image, I realized that using this name poses a problem as it clashes with Javascript's native Image element constructor, also named Image. This conflict arises when attempting to utilize both the custom Im ...

javascriptangularjsimagedependency-injection

Is using Javascript objects a better alternative to Redux?

I'm in the process of creating my initial application with React and have opted to integrate Redux into it. Since incorporating Redux, it appears that setting a component state to a basic global JavaScript object would be a simpler approach. I unders ...

javascriptreactjsreduxreact-redux

Utilizing Vue.js transitions to display content with a one-time transition limit

I have followed the Vue.js documentation given below to implement the show transition, but I'm struggling with stopping the hide effect on the second click. Is there a way to achieve this? https://v2.vuejs.org/v2/guide/transitions.html#a Can I conti ...

javascriptvue.jsvuejs2

Issue encountered: Unable to add MongoDB object to database

Recently, I have encountered an issue with a script that looks like this: use first_db; advertisers = db.agencies.find( 'my query which returns things correctly ); close first_db; use second_db; db.advertisers.insert(advertisers); This error mess ...

javascriptjsonmongodb

Retrieve a specific value from an array of objects by searching for a particular object's value

Here is an example of an array of objects I am working with: $scope.SACCodes = [ {'code':'023', 'description':'Spread FTGs', 'group':'footings'}, {'code':'024', ' ...

javascriptangularjs

Improprove the performance of an array of objects using JavaScript

Hello there, I am currently in the process of creating an array. this.data = [{ label: 'Total', count: details.request.length, }, { label: 'In-Progress', count: details.request.filter((obj) => obj.statusId === 0 || ob ...

javascripttypescriptjavascript-objects

Toggle the on and off functionality of a button using ajax response for content display

I'm struggling to figure out why the button isn't working for me. I am familiar with how to enable and disable buttons using attr and prop. $(document).on("click", "#btn", function(){ $(this).html("Sending..."); $(this).prop("disabl ...

javascriptjqueryajax

AgGrid Encounters Difficulty in Recovering Original Grid Information

After making an initial API call, I populate the grid with data. One of the fields that is editable is the Price cell. If I edit a Price cell and then click the Restore button, the original dataset is restored. However, if I edit a Price cell again, the ...

javascriptreactjstypescriptag-grid

Modifying Props in Reactjs: Ways to update data passed from parent component to child component

Currently, I am working on a project where I have multiple components on a page and pass data between them using props. The issue arises when I update the data in the parent component but the child component still uses the old data. Let me illustrate with ...

javascriptreactjs

The toggleClass() function is only toggling between a single class

I'm currently facing an issue with a jQuery/Angular function that is triggered on click. <a ng-click="like()" href="#" class="like like--yes"></a> Essentially, my goal is to switch between the classes like--yes and like--no when the like ...

javascriptjqueryangularjs

There seems to be an issue as req.files in Sails.js is blank and the value of req

I've been struggling with this problem for quite some time now. Despite my efforts to find a solution through Google and StackOverFlow, I have not been successful. The issue lies within a project I am working on, where I have implemented a "Product" M ...

javascriptnode.jsexpresssails.js

Finding an element based on its styling attribute, such as its position on the left or right side

One particular block that caught my eye is the slider element: <div id="sliderDispo" class="slider slider-dispo" data-slider-init="" data-slider-color="#0077b5 #EC6E31 #E40B0B" data-slider-step="33" > <div class="slider__interval" ...

javascriptjqueryhtmlcss