Created
February 21, 2018 18:38
-
-
Save toricls/5c38d2930a36262f0674c1ffa8d5134a to your computer and use it in GitHub Desktop.
Very basic AWS Amplify auth in Vue (signup, signin, signout)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import Amplify, { Auth } from 'aws-amplify'; | |
const types = { | |
AUTHENTICATE: 'AUTHENTICATE', | |
SIGNOUT: 'SIGNOUT', | |
SET_ATTRIBUTES: 'SET_ATTRIBUTES', | |
}; | |
Amplify.configure({ | |
Auth: { | |
identityPoolId: process.env.COGNITO_IDENTITY_POOL_ID, | |
region: process.env.AWS_REGION, | |
userPoolId: process.env.COGNITO_USER_POOL_ID, | |
userPoolWebClientId: process.env.COGNITO_APP_CLIENT_ID, | |
mandatorySignIn: true, | |
}, | |
}); | |
/* | |
* Rename certain attributes if you want them to conform to your naming | |
* conventions. Attributes not defined here will still wind up in Vuex. | |
*/ | |
const attributeMappings = { | |
email: 'email', | |
email_verified: 'emailVerified', | |
family_name: 'lastName', | |
given_name: 'firstName', | |
}; | |
function extractAttributes(attributes) { | |
const convertValue = value => { | |
if (!isNaN(value)) return Number(value); | |
if (value === 'true' || value === 'false') return value === 'true'; | |
return value; | |
}; | |
if (Array.isArray(attributes) || !attributes) { | |
return (attributes || []).reduce((accum, item) => { | |
if (attributeMappings[item.Name]) { | |
accum[attributeMappings[item.Name]] = convertValue(item.Value); | |
} else { | |
accum[item.Name] = convertValue(item.Value); | |
} | |
return accum; | |
}, {}); | |
} | |
// It's an object | |
const attribs = {}; | |
for (const key in attributes) { | |
if (attributeMappings[key]) { | |
attribs[attributeMappings[key]] = convertValue(attributes[key]); | |
} else { | |
attribs[key] = convertValue(attributes[key]); | |
} | |
} | |
return attribs; | |
} | |
const state = { | |
user: null, | |
}; | |
const actions = { | |
async getCurrentUserInfo({ commit }) { | |
// This is returning null - why? | |
// const user = await Auth.currentUserInfo(); | |
const user = await Auth.currentAuthenticatedUser(); | |
const attributes = await Auth.userAttributes(user); | |
console.log(attributes); | |
commit(types.AUTHENTICATE, { | |
username: user.username, | |
...extractAttributes(attributes), | |
}); | |
}, | |
async signIn({ commit }, { username, password }) { | |
const user = await Auth.signIn(username, password); | |
const attributes = await Auth.userAttributes(user); | |
commit(types.AUTHENTICATE, { | |
username: user.username, | |
...extractAttributes(attributes), | |
}); | |
}, | |
async signOut() { | |
await Auth.signOut(); | |
}, | |
async signUp(_, { username, password, firstName, lastName }) { | |
const data = await Auth.signUp({ | |
username, | |
password, | |
attributes: { | |
given_name: firstName, | |
family_name: lastName, | |
}, | |
}); | |
console.log(data); | |
}, | |
}; | |
const mutations = { | |
[types.AUTHENTICATE](state, payload) { | |
state.user = payload; | |
}, | |
[types.SIGNOUT](state) { | |
state.user = null; | |
}, | |
}; | |
export default { | |
namespaced: true, | |
state, | |
actions, | |
mutations, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment