Set password of auth0

Help
,
1

Hello!!! I’m trying to set password using Directly set the new password, Use the Management API, so this is my code:

export const changePassword = async (userId:string, accessToken: string, newPassword: string): Promise<ApiCallResult> => {
  const config: AxiosRequestConfig = {
    url: `${Auth0Domain}/api/v2/users/${userId}`, 
    method: "PATCH",
    headers: {
      "content-type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    data: JSON.stringify({ 
      password: newPassword,
      connection: 'Username-Password-Authentication',      
    }),
  };

  const { data, error } = await callExternalApi({ config });

  return {
    data: data || null,
    error,
  };  
}

so, when I tried to change password I get this:

error: "Forbidden"
errorCode: "insufficient_scope"
message: "Insufficient scope, expected any of: update:users,update:users_app_metadata,update:current_user_metadata"
statusCode: 403

so I was checking my auth0 config, currently I configure auth0:

  app.use(vuero.router)
    .use(   
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
          audience: import.meta.env.VITE_AUTH0_AUDIENCE,
        },        
      })
    )

then I try to add 'scope: ‘update:users’`, like:

  app.use(vuero.router)
    .use(   
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
          audience: import.meta.env.VITE_AUTH0_AUDIENCE,
          scope: 'update:users'
        },        
      })
    )

but My application don’t work, I can logged in

so, what’s wrong??

3

Hi. Thanks for reaching out to community.

Please make sure you have updated necessary permission for API application in Auth0 dashboard which you used to create the access token.

Reference - Add API Permissions

Let me know if that works. Thanks !!

Regards,
Gautham

4

Hello @gauthamsv5

Thanks for your help.

I checked my API permission and "update:users’ is created.

Do you think that I can’t logged in, could be by permission update:users ???

5

Hey!! Thanks for the response. Yes, that’s the reason as you were trying to do PATCH call which needs that particular scope. Please confirm if your issue is resolved now.

Regards,
Gautham

6

Hey!! not work it.

I added the permission:

Untitled
Untitled1203×839 42.2 KB

and on my app.ts on my front vue js 3

  app.use(vuero.router)
    .use(   
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
          audience: import.meta.env.VITE_AUTH0_AUDIENCE,
          scope: 'update:users'
        },        
      })
    )

so, Since I added the 'scope: 'update:users' permission, I cannot log in, I add the email and password, I press the “Log in” button, it loads, it updates and shows me the Universal login form again.

but, if I remove 'scope: 'update:users', I can log in, that is, I add the email and password, press log in and it shows me the dashboard, but I can’t update the password

7

Hi,

Can you confirm if you removed the scope: ‘update:users’ in your code as the permissions are updated in dashboard. Also, you mentioned you were able to log in and password ddnt update or app didnt work. Can you update more information on this by providing any error screenshot or issue description?

Regards,
Gautham

8

yes, this one: without scope: ‘update:users’

this is my app.ts

import { createApp as createClientApp } from 'vue'

import { createHead } from '@unhead/vue'
import { InferSeoMetaPlugin } from '@unhead/addons'
import { createPinia } from 'pinia'
import { createRouter } from './router'
//@ts-ignore
import VueroApp from './VueroApp.vue'
import './styles'
import { createAuth0 } from '@auth0/auth0-vue'

export type VueroAppContext = Awaited<ReturnType<typeof createApp>>
export type VueroPlugin = (vuero: VueroAppContext) => void | Promise<void>

const plugins = import.meta.glob<{ default: VueroPlugin }>('./plugins/*.ts')

// this is a helper function to define plugins with autocompletion
export function definePlugin(plugin: VueroPlugin) {
  return plugin
}

export async function createApp() {
  const app = createClientApp(VueroApp)
  const router = createRouter()

  const head = createHead({
    plugins: [InferSeoMetaPlugin()],
  })
  app.use(head)

  const pinia = createPinia()
  app.use(pinia)

  const vuero = {
    app,
    router,
    head,
    pinia,
  }

  app.provide('vuero', vuero)

  for (const path in plugins) {
    try {
      const { default: plugin } = await plugins[path]()
      await plugin(vuero)
    } catch (error) {
      console.error(`Error while loading plugin "${path}".`)
      console.error(error)
    }
  }

  // use router after plugin registration, so we can register navigation guards
  app.use(vuero.router)
    .use(   
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
          audience: import.meta.env.VITE_AUTH0_AUDIENCE
        },        
      })
    )

  return vuero
}

I can log in:

Untitled
Untitled1355×395 132 KB

but If I tried to update the password:

Untitled1
Untitled11065×410 77.2 KB

I got this:

error: "Forbidden"
errorCode: "insufficient_scope"
message: "Insufficient scope, expected any of: update:users,update:users_app_metadata,update:current_user_metadata"
statusCode: 403

now, testing it, But I’m going to add the scope: 'update:users'

this is my app.ts

import { createApp as createClientApp } from 'vue'

import { createHead } from '@unhead/vue'
import { InferSeoMetaPlugin } from '@unhead/addons'
import { createPinia } from 'pinia'
import { createRouter } from './router'
//@ts-ignore
import VueroApp from './VueroApp.vue'
import './styles'
import { createAuth0 } from '@auth0/auth0-vue'

export type VueroAppContext = Awaited<ReturnType<typeof createApp>>
export type VueroPlugin = (vuero: VueroAppContext) => void | Promise<void>

const plugins = import.meta.glob<{ default: VueroPlugin }>('./plugins/*.ts')

// this is a helper function to define plugins with autocompletion
export function definePlugin(plugin: VueroPlugin) {
  return plugin
}

export async function createApp() {
  const app = createClientApp(VueroApp)
  const router = createRouter()

  const head = createHead({
    plugins: [InferSeoMetaPlugin()],
  })
  app.use(head)

  const pinia = createPinia()
  app.use(pinia)

  const vuero = {
    app,
    router,
    head,
    pinia,
  }

  app.provide('vuero', vuero)

  for (const path in plugins) {
    try {
      const { default: plugin } = await plugins[path]()
      await plugin(vuero)
    } catch (error) {
      console.error(`Error while loading plugin "${path}".`)
      console.error(error)
    }
  }

  // use router after plugin registration, so we can register navigation guards
  app.use(vuero.router)
    .use(   
      createAuth0({
        domain: import.meta.env.VITE_AUTH0_DOMAIN,
        clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
        authorizationParams: {
          redirect_uri: import.meta.env.VITE_AUTH0_CALLBACK_URL,
          audience: import.meta.env.VITE_AUTH0_AUDIENCE,
          scope: 'update:users'
        },        
      })
    )

  return vuero
}

on my dashboard of auth0:

Untitled2
Untitled21290×754 38.9 KB

then when I tried to log in:

Untitled
Untitled1355×415 112 KB

you can see that I wrote the email and password, so, I pressed the button Log in and the page redirect me to the same page, I mean redirect me to the universal login of auth0, this happends when I added the scope: 'update:users'

so, I was checking the log:

Untitled4
Untitled41190×790 53.2 KB

and it seems everything is fine.

what do you think?

9

Thanks for your detailed response.

Can you try Configure Default Login Routes if you haven’t already. This provides a detailed way of redirect to app’s point post change password flow.

Let me know if this approach works.

Regards,
Gautham

10

Hello @gauthamsv5!

I don’t understand so much this topic, currently i’m using loginWithRedirect ()

<script setup lang="ts">

  import { useAuth0 } from "@auth0/auth0-vue";

  const { loginWithRedirect } = useAuth0();

  //default redirect to Universal Login of Auth0
  loginWithRedirect({
    appState: {
      target: "/callback",
    },
    authorizationParams: {
      prompt: "login",
    },
  })

</script>

each time that one user is logged in, I check the email on my own database, but you can see that i’m using method loginWithRedirect()

on my callback, I have this:

<script setup lang="ts">

  import { useAuth0 } from "@auth0/auth0-vue";
  import { useDarkmode } from '/@src/stores/darkmode'
  import { useUserSession } from '/@src/stores/userSession'
  import { useNotyf } from '/@src/composable/useNotyf'
  import { checkUserLogged, getDataUserLogged } from '/@src/services/session.service'
  import sleep from '/@src/utils/sleep'

  const isLoading = ref(false)
  const darkmode = useDarkmode()
  const router = useRouter()
  const route = useRoute()
  const notyf = useNotyf()
  const userSession = useUserSession()
  const redirect = route.query.redirect as string
  const { error, isAuthenticated, user, getAccessTokenSilently, logout   } = useAuth0()

  const init = async () => {
    try{
      if(isAuthenticated.value){  

        try {
          const accessToken = await getAccessTokenSilently();

          const userlogged = {
            email: user?.email ||  user._rawValue.email,
            nickname: user?.nickname || user._rawValue.nickname,
            picture: user?.picture || user._rawValue.picture,
          }
          const { data, error } = await checkUserLogged(accessToken, userlogged);

          if(data.authorize){ 
            const infoUserLogged = await getDataUserLogged(accessToken, userlogged.email);

            userSession.setToken( accessToken );
            userSession.setUserEmail(userlogged.email);
            userSession.setUser(infoUserLogged);
            notyf.dismissAll();
            notyf.success(`Welcome back, ${userlogged.nickname}`);
            router.push('/app')
          }else{
              await logout({});
              router.push('/error')            
          }
        } catch (error) {
          console.log("Try catch: ", error);
          router.push('/error')
        }
      }else{ 
        router.push('/error')
      }
    } catch (error) {
      router.push('/');
    }
  }

  init();

</script>

so i checked the url Configure Default Login Routes but I don’t unterstand where I should configure it, can you help me please?? where I should configure the Configure Default Login Routes

thanks you so much!! I appreciate it!