vuetifyjs/vuex

📚 Mono-repo structure for Vuetify Vuex modules

vuetify-vuex

A collection of plugins for Vuex

💿 Install

Select a package below

• cognito-module

💪 Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by community backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github (supports John)
• Becoming a backer on OpenCollective (supports the Dev team)
• Become a subscriber on Tidelift
• Make a one-time payment with Paypal
• Book time with John

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC

vuex's Issues

USER is set to "[object Object]"

I've added a sign up form similar to the one in the example and called:

this.$store.dispatch('cognito/registerUser', {
    username: this.username,
    password: this.password,
    attributes: {
      given_name: this.givenName,
      family_name: this.familyName,
      email: this.email.toLowerCase()
    }
})

When reloading, I wasn't logged in. I've checked the local storage and there was an entry with key 'USER' but it was set to the string '[object Object]'.
I assume that this is not the intended behavior.
I'm using Vue v2.5.17 with Vuex v3.0.1, Vuetify v1.3.0 and @vuetify/vuex-cognito-module v0.4.0.

PS: Thank you for you work on this, it's a great addition and helped me a lot.

Version without bundled amplify

There should be version without bundled amplify. Because otherwise if end user want to use amplify lib itself it will be double bundled and sessions will be messed

[Feature Request] Vuetify alert(), confirm() and prompt()

Problem to solve

The standard JavaScript popups look different for every browser and often don't fit Material Design. Also, adding a popup to the template of every component where you want to have a confirm dialog is annoying.

Proposed solution

-      <v-btn @click="deleteDialog = true">Delete</v-btn>
+      <v-btn @click="deleteItem">Delete</v-btn>
-        <v-dialog v-model="deleteDialog" max-width="500px">
-            <v-card>
-                <v-card-title>Delete item?</v-card-title>
-                <v-card-actions>
-                    <v-spacer></v-spacer>
-                    <v-btn color="primary" flat @click.native="deleteDialog = false">Cancel</v-btn>
-                    <v-btn color="primary" flat @click.native="deleteItem">Delete</v-btn>
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
...
// deleteItem function
+ if(await this.$vuetify.confirm("Delete item?")){
+     // original deleteItem code
+ }

Even if you put the delete dialog above inside it's own file, you still need a local variable that controls the dialog's visibility. With $vuetify.<popup name>, you can handle the whole logic within a single method.

- if(window.confirm("Do you want to continue")){
+ if(await this.$vuetify.confirm("Do you want to continue")){
     doSomething();
 }

- const input = prompt("What is your name")
+ const input = await this.$vuetify.prompt("What is your name")

Alert, confirm and prompt should be implemented by Vuetify, but users should have the ability to define their own popups by

• passing components to the Vuetify constructor
• using scoped slots inside VApp
• or like this this.$vuetify.customPopup(MyCustomPopup, "Do you want to continue")

Components get all data passed to $vuetify.<popup name> using the vuetify-popup prop or scoped slots and can return data using $emit("update:vuetifyPopup", <data to return>). Emitting update:vuetifyPopup also causes components to be unmounted.

[Bug report] Nuxt - IE 11 - Syntax error

Configuration:
"@vuetify/vuex-cognito-module": "^0.5.4",
"nuxt": "^2.11.0",

The error logged in console, in the vendor.app.js file:

global Sign out

Can you add option global for SignOut ?

[Bug report] After sign out error

Add custom config

I wont use CookieStorage :)

Looking for help with maintaining this package

Anyone that would be interested in taking over lead maintainer on this project, post here please.

Clarify usage of getters and actions

Hi guys!

I'm a newcomer to Vue, Vuetify, Vuex and Cognito (backender playing a little bit), and I had A LOT of troubles to get this library working on my end.

This happened because I didn't know that I must first dispatch fetchSession before any variable is available. I finally found that I needed to do it from the example repository, and it was kind of hidden there too.

Now, I don't know if this confusion is because of my poor experience with all these tools, or if the documentation can be indeed improved.

Access Token Retrieval

Glad to see an official Vuex Cognito plugin!

As part of AWS Cognito usage, usually there are Cognito-authenticated API calls (to API Gateway, etc.).
For that, we'll need to retrieve the access token to use in the HTTP request's Authorization header.
My current implementation for that (notice that is directly relying on the AWS Cognito library + it's not promise-based):

function getAccessToken(callback) {
    const user = gUserPool.getCurrentUser();

    if (user == null) {
        callback(null, 'User not logged in');
        return;
    }

    user.getSession((err, session) => {
        if (err) {
            callback(null, err);
            return;
        }

        if (session.isValid()) {
            // Return the token
            callback(session.getIdToken().getJwtToken(), null);
            return;
        }

        // Need to refresh token
        user.refreshSession(session.getRefreshToken(), (error, newSession) => {
            if (error) {
                callback(null, error);
                return;
            }

            // Return the new token
            callback(newSession.getIdToken().getJwtToken(), null);
        });
    });
}

Or is this out of scope for the module?

[Feature Request] Firebase Auth Module

Problem to solve

Integrates Firebase Authentication and user claim/identity/role part of Vuetify system that almost every application needs to authenticate and authorize users.

Proposed solution

Firebase has one of the best auth system and unlike AWS or Azure, it is free and ties very nicely with Firestore database. By creating this module more developers would approach Vuetify for building Business and real world applications.

[Bug report] vuex-cognito-module build size

I just noticed that vuex-cognito-module.umd.min.js is 350 kb (gzipped just over 100) and it's making my vendor.js REALLY big.

I am using 0.5.4 and i checked the build size using the webpack bundle analyzer!