Nuxt Authentification parameter for token

Question

Guys! Currently I have a problem sending request for token. I'm using nuxtJS @nuxtjs/auth-next module. It's working great, but i faced a problem not sending client_secret. This request for authorization goes to AZURE AD. My config:

msalAzure: {
    scheme: 'oauth2',
    endpoints: {
      authorization: `${process.env.VUE_APP_AZURE_AUTHORITY}/oauth2/v2.0/authorize`,
      token: `${process.env.VUE_APP_AZURE_AUTHORITY}/oauth2/v2.0/token`,
    },
    token: {
      property: 'access_token',
      type: 'Bearer',
      maxAge: 1800,
      global: true,
    },
    refreshToken: {
      property: 'refresh_token',
      maxAge: 60 * 60 * 24 * 30,
    },
    responseType: 'code',
    responseMode: 'query',
    grantType: 'authorization_code',
    accessType: 'offline',
    // ******** change this for your Application (Client) ID ********
    redirectUri: process.env.VUE_APP_AZURE_REDIRECT_URI,
    clientId: process.env.VUE_APP_AZURE_AD_CLIENT_ID,
    clientSecret: process.env.VUE_APP_AZURE_SECRET,
    codeChallengeMethod: 'S256',
    scope: ['offline_access', 'openid', 'profile', 'User.Read'],
    autoLogout: false,
  },

payload for token where i need to paste client_secret:

code: 0.AS8AovV86_Vz5UuO2sAmSstunkCOoPABwrREiFppI0jDAkwvAMU.AgABAAIAAAD--DLA3VO7QrddgJg7WevrAgDs_wQA9P9iCom2SEms5Su-Au0Vl3-GG9W1y4OUDaCIF0y4xmd9H4TIFgNmGW0K425Ji9zN2xAKf6VaQ6q8EiBI9AXdNv8DqZMCDTs9qWBETVF2JftuXIeazYEu-eqmqkNMAp0arJ9Mf7GAnrWHCa5wDYpwXNCI9tQ7nqmuHzp3aRjldsN77_5bq1eqgq7PvU5KaNGmxmkYe96_Xzeqqu-9FlJGpNlJ6y8J1BZtW4wVlRrOn6-n1aIFqOcAGp00kR53uiWExjAIZMdPIdjW8BgD2O6ZY8l_779ArkGrUT6zYEjs_YRb7yg2EqgqnL7ZVBVhoufAxbtsRiGbtvA5_Usp4rPf5Bxft3evNPCYA33PWsJUNSOiq4PeOFfpPHjlA7zwkouwfXnmrswONQatNl8xM3BQuduwf1mAszZQKl-skR9-XlvPxj66aGpdl3_hzIqWCqSbSbmIK0e40-Ob4r7XuNb1qoy7opbJfDp1FmTl6WHRexEE1RPBw_XER7kb6kBrXYnTaYPxHuIcVZeYdYS58o_8kMwVVO-qsTb1N7RyT52DgiHB22yUNZaPwpyB6k1wr9hSbhPT6jkIMbuud__EHrmvRVqQaTY1CHAVG8H1wd3CKJCWTFR9sajos17VybxJ4VT_r7ySRUH2UQarOU0ooTlyO32P7iBO5K9CU3V4XrRAQCiVfIMNcbcU1WWlF_eTkEX9bXnHN6houQtLhVndm8y1XIJ21_qh4pVB3wpm0HrXXSGdYgvrM2Td7zx6EZPKK1CmJMgnEii5w1U09occn-CLHLBZAv6_vE8hNCS3VqN20YAvO2vhiLYalS4JmNHG3Z4CVuJ3K7fz5B23kA
client_id: f0a08e40-c201-44b4-885a-692348c3024c
redirect_uri: http://localhost:8005/login/submit/
response_type: code
audience: 
grant_type: authorization_code

Sending request for strategy (this params goes for authorize only):

@click="$auth.loginWith('msalAzure', { params: { client_secret: process.env.VUE_APP_AZURE_SECRET,},})"

Thank you for your help!

user_6357537 · Answer

You cannot access your process.env.VUE_APP_AZURE_SECRET at the client side. Action click and event trigger is client side.

Please try public runtime config with Public Runtime Config - Value of this object is accessible from both client and server using $config.

At nuxt.config.js

publicRuntimeConfig: {
  azureClientSecret: process.env.VUE_APP_AZURE_SECRET
}

Then you can use this value by access $config.azureClientSecret at your code as below:

@click="$auth.loginWith('msalAzure', { params: { client_secret: $config.azureClientSecret,},})"

But I think you should avoid put your secret key at the client side.

Nuxt Authentification parameter for token

1 Answers