amazon-archives / amazon-cognito-auth-js

The Amazon Cognito Auth SDK for JavaScript simplifies adding sign-up, sign-in with user profile functionality to web apps.
Apache License 2.0
423 stars 232 forks source link

How to handle onSuccess and onFailure callbacks in vuejs #64

Open maziarz opened 6 years ago

maziarz commented 6 years ago

I am looking into implementing this lib in vuejs and wondering if there is an example which shows how to handle these callbacks?

lucasmike commented 6 years ago

hi, have a look at my sample implementation. hope this helps...

  this.auth.userhandler = {
    onSuccess: function (result) {
      console.log('LoginCognitoAuth, onSuccess: login successful')
      // getting tokens
      let accessToken = result.getAccessToken().getJwtToken()
      let idToken = result.getIdToken().getJwtToken()
      let refreshToken = result.getRefreshToken().getToken()

      //saving tokens to local storage
      window.localStorage.setItem('accessToken', accessToken)
      window.localStorage.setItem('idToken', idToken)
      window.localStorage.setItem('refreshToken', refreshToken)

      // getting information about the user from the token - using sjcl to decode from base64
      let idTokenPayload = idToken.split('.')[1]
      let payload = JSON.parse(sjcl.codec.utf8String.fromBits(sjcl.codec.base64url.toBits(idTokenPayload)))
      console.log('id token decoded content, payload:')
      console.log(payload)
      let userGroup = payload['cognito:groups']
      if (userGroup && userGroup.length > 0) {
        window.localStorage.setItem('userGroup', userGroup)
      } else {
        userGroup = 'clientGroup'
        window.localStorage.setItem('userGroup', userGroup)
      }
      let userSub = payload['sub']
      console.log('setting local storage: userSub, userState, username')

      // setting some parameters for my application - these are watched by Vue to verify if the use is signed in
      window.localStorage.setItem('userSub', userSub)
      window.localStorage.setItem('userState', 'signedIn')
      window.localStorage.setItem('username', payload['cognito:username'])
      window.location.assign(Config.BASE_URL)
    },
    onFailure: function (err) {
      // not doing anytnig on failure - Vue will check 'userState' in localstorage and if not set to 'signIn' - will treat as user never signed in...
      alert('Error!' + err)
    }
  }