/nuxt-google-facebook-twitter-github-auth

Login to Google Facebook Twitter and GitHub using Nuxt, express-session and connect-redis with support for local login using LocalStrategy

Primary LanguageJavaScript

auth

Nuxt.js authentication using express-session and connect-redis with support for Facebook, Twitter, Google and GitHub Login. No databases have been added to this library so you'll have to add your database to the authentication strategies in order to make it truly work. Use 'demo' as the username and password to do local login, add your client secret and client id to the server/config/.env.* files to perform the actual social login. Redis is using database 1 for sessions and a password on localhost, feel free to change those

Build Setup

# install dependencies
$ npm run install

# serve with hot reload at localhost:3000
$ npm run dev

# serve with hot reload in debug mode at localhost:3000
$ npm run deb

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Objects

Facebook Profile Object

{
    id: '5459754221345688',
    username: undefined,
    displayName: undefined,
    name: {
        familyName: 'XYZ',
        givenName: 'abc',
        middleName: undefined
    },
    gender: undefined,
    profileUrl: undefined,
    emails: [{
        value: 'abc.officialr@gmail.com'
    }],
    provider: 'facebook',
    _raw: '{"last_name":"XYZ","first_name":"abc","email":"abc.officialr\\u0040gmail.com","id":"5459754221345688"}',
    _json: {
        last_name: 'XYZ',
        first_name: 'abc',
        email: 'abc.officialr@gmail.com',
        id: '5459754221345688'
    }
}

Twitter Profile Object

{
    id: '466421541215451645',
    username: 'username',
    displayName: 'username',
    emails: [{
        value: 'username@gmail.com'
    }],
    photos: [{
        value: 'https://pbs.twimg.com/profile_images/154854541201858955/HhaZWgHj_normal.jpg'
    }],
    provider: 'twitter',
    _raw: '{"id":466421541215451645,"id_str":"466421541215451645","name":"username","screen_name":"username","location":"","description":"dummy description","url":"https:\\/\\/t.co\\/MDQ6VXNlcj","entities":{"url":{"urls":[{"url":"https:\\/\\/t.co\\/MDQ6VXNlcj","expanded_url":"https:\\/\\/botlist.co\\/bots\\/username","display_url":"botlist.co\\/bots\\/username","indices":[0,23]}]},"description":{"urls":[]}},"protected":false,"followers_count":47,"friends_count":224,"listed_count":0,"created_at":"Thu Jun 22 06:04:19 +0000 2017","favourites_count":23,"utc_offset":null,"time_zone":null,"geo_enabled":false,"verified":false,"statuses_count":122,"lang":null,"status":{"created_at":"Wed May 08 14:16:09 +0000 2019","id":1126128657540403200,"id_str":"1126128657540403200","text":"RT helo world\\nhttps:\\/\\/t.co\\/4aYHFafgaGT","truncated":false,"entities":{"hashtags":[],"symbols":[],"user_mentions":[{"screen_name":"dummy","name":"dummy","id":2207129125,"id_str":"2207129125","indices":[3,17]}],"urls":[{"url":"https:\\/\\/t.co\\/4aYHFafgaGT","expanded_url":"https:\\/\\/dummy.com\\/news\\/dummy-link","display_url":"dummy.com\\/news\\/hackers-w\\u2026","indices":[87,110]}]},"source":"\\u003ca href=\\"http:\\/\\/twitter.com\\" rel=\\"nofollow\\"\\u003eTwitter Web Client\\u003c\\/a\\u003e","in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"geo":null,"coordinates":null,"place":null,"contributors":null,"retweeted_status":{"created_at":"Wed May 08 00:36:05 +0000 2019","id":1125922284013678592,"id_str":"1125922284013678592","text":"Hackers withdraw 7,000 bitcoins in Binance exchange security breach\\nhttps:\\/\\/t.co\\/4aYHFafgaGT","truncated":false,"entities":{"hashtags":[],"symbols":[],"user_mentions":[],"urls":[{"url":"https:\\/\\/t.co\\/4aYHFafgaGT","expanded_url":"https:\\/\\/dummy.com\\/news\\/dummy-link","display_url":"dummy.com\\/news\\/hackers-w\\u2026","indices":[68,91]}]},"source":"\\u003ca href=\\"https:\\/\\/amplifr.com\\" rel=\\"nofollow\\"\\u003eAmplifr\\u003c\\/a\\u003e","in_reply_to_status_id":null,"in_reply_to_status_id_str":null,"in_reply_to_user_id":null,"in_reply_to_user_id_str":null,"in_reply_to_screen_name":null,"geo":null,"coordinates":null,"place":null,"contributors":null,"is_quote_status":false,"retweet_count":157,"favorite_count":255,"favorited":false,"retweeted":true,"possibly_sensitive":false,"lang":"en"},"is_quote_status":false,"retweet_count":157,"favorite_count":0,"favorited":false,"retweeted":true,"possibly_sensitive":false,"lang":"en"},"contributors_enabled":false,"is_translator":false,"is_translation_enabled":false,"profile_background_color":"F5F8FA","profile_background_image_url":null,"profile_background_image_url_https":null,"profile_background_tile":false,"profile_image_url":"http:\\/\\/pbs.twimg.com\\/profile_images\\/154854541201858955\\/HhaZWgHj_normal.jpg","profile_image_url_https":"https:\\/\\/pbs.twimg.com\\/profile_images\\/154854541201858955\\/HhaZWgHj_normal.jpg","profile_banner_url":"https:\\/\\/pbs.twimg.com\\/profile_banners\\/466421541215451645\\/1501313804","profile_link_color":"1DA1F2","profile_sidebar_border_color":"C0DEED","profile_sidebar_fill_color":"DDEEF6","profile_text_color":"333333","profile_use_background_image":true,"has_extended_profile":false,"default_profile":true,"default_profile_image":false,"can_media_tag":true,"followed_by":false,"following":false,"follow_request_sent":false,"notifications":false,"translator_type":"none","suspended":false,"needs_phone_verification":false,"email":"username@gmail.com"}',
    _json: {
        id: 877769196762914800,
        id_str: '466421541215451645',
        name: 'username',
        screen_name: 'username',
        location: '',
        description: 'dummy description',
        url: 'https://t.co/MDQ6VXNlcj',
        entities: {
            url: [Object],
            description: [Object]
        },
        protected: false,
        followers_count: 47,
        friends_count: 224,
        listed_count: 0,
        created_at: 'Thu Jun 22 06:04:19 +0000 2017',
        favourites_count: 23,
        utc_offset: null,
        time_zone: null,
        geo_enabled: false,
        verified: false,
        statuses_count: 122,
        lang: null,
        status: {
            created_at: 'Wed May 08 14:16:09 +0000 2019',
            id: 1126128657540403200,
            id_str: '1126128657540403200',
            text: 'RT helo world',
            truncated: false,
            entities: [Object],
            source: '<a href="http://twitter.com" rel="nofollow">Twitter Web Client</a>',
            in_reply_to_status_id: null,
            in_reply_to_status_id_str: null,
            in_reply_to_user_id: null,
            in_reply_to_user_id_str: null,
            in_reply_to_screen_name: null,
            geo: null,
            coordinates: null,
            place: null,
            contributors: null,
            retweeted_status: [Object],
            is_quote_status: false,
            retweet_count: 157,
            favorite_count: 0,
            favorited: false,
            retweeted: true,
            possibly_sensitive: false,
            lang: 'en'
        },
        contributors_enabled: false,
        is_translator: false,
        is_translation_enabled: false,
        profile_background_color: 'F5F8FA',
        profile_background_image_url: null,
        profile_background_image_url_https: null,
        profile_background_tile: false,
        profile_image_url: 'http://pbs.twimg.com/profile_images/154854541201858955/HhaZWgHj_normal.jpg',
        profile_image_url_https: 'https://pbs.twimg.com/profile_images/154854541201858955/HhaZWgHj_normal.jpg',
        profile_banner_url: 'https://pbs.twimg.com/profile_banners/466421541215451645/1501313804',
        profile_link_color: '1DA1F2',
        profile_sidebar_border_color: 'C0DEED',
        profile_sidebar_fill_color: 'DDEEF6',
        profile_text_color: '333333',
        profile_use_background_image: true,
        has_extended_profile: false,
        default_profile: true,
        default_profile_image: false,
        can_media_tag: true,
        followed_by: false,
        following: false,
        follow_request_sent: false,
        notifications: false,
        translator_type: 'none',
        suspended: false,
        needs_phone_verification: false,
        email: 'username@gmail.com'
    },
    _accessLevel: 'read-write'
}

Google Profile Object

{
    provider: 'google',
    sub: '45684644664512633259',
    id: '45684644664512633259',
    displayName: 'Random Name',
    name: {
        givenName: 'Random',
        familyName: 'Name'
    },
    given_name: 'Random',
    family_name: 'Name',
    email_verified: true,
    verified: true,
    language: 'en',
    locale: undefined,
    email: 'abc.9891@gmail.com',
    emails: [{
        value: 'abc.9891@gmail.com',
        type: 'account'
    }],
    photos: [{
        value: 'https://lh3.googleusercontent.com/a-/BoG15864BVcYCNJikZpTTuVX789452314510BHiJKlMnIpQ',
        type: 'default'
    }],
    picture: 'https://lh3.googleusercontent.com/a-/BoG15864BVcYCNJikZpTTuVX789452314510BHiJKlMnIpQ',
    _raw: '{\n  "sub": "45684644664512633259",\n  "name": "Random Name",\n  "given_name": "Random",\n  "family_name": "Name",\n  "picture": "https://lh3.googleusercontent.com/a-/BoG15864BVcYCNJikZpTTuVX789452314510BHiJKlMnIpQ",\n  "email": "abc.9891@gmail.com",\n  "email_verified": true,\n  "locale": "en"\n}',
    _json: {
        sub: '45684644664512633259',
        name: 'Random Name',
        given_name: 'Random',
        family_name: 'Name',
        picture: 'https://lh3.googleusercontent.com/a-/BoG15864BVcYCNJikZpTTuVX789452314510BHiJKlMnIpQ',
        email: 'abc.9891@gmail.com',
        email_verified: true,
        locale: 'en'
    }
}

GitHub Profile Object

{
    id: '3194523',
    displayName: 'dummyboy',
    username: 'dummyboy',
    profileUrl: 'https://github.com/dummyboy',
    emails: [{
        value: 'dummyboy@gmail.com'
    }],
    photos: [{
        value: 'https://avatars3.githubusercontent.com/u/3194523?v=4'
    }],
    provider: 'github',
    _raw: '{"login":"dummyboy","id":3194523,"node_id":"ADQ541NiCUjKLmaaNgaA=","avatar_url":"https://avatars3.githubusercontent.com/u/3194523?v=4","gravatar_id":"","url":"https://api.github.com/users/dummyboy","html_url":"https://github.com/dummyboy","followers_url":"https://api.github.com/users/dummyboy/followers","following_url":"https://api.github.com/users/dummyboy/following{/other_user}","gists_url":"https://api.github.com/users/dummyboy/gists{/gist_id}","starred_url":"https://api.github.com/users/dummyboy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dummyboy/subscriptions","organizations_url":"https://api.github.com/users/dummyboy/orgs","repos_url":"https://api.github.com/users/dummyboy/repos","events_url":"https://api.github.com/users/dummyboy/events{/privacy}","received_events_url":"https://api.github.com/users/dummyboy/received_events","type":"User","site_admin":false,"name":"dummyboy","company":"dummyboy","blog":"http://dummyboy.com","location":"Mars","email":"dummyboy@gmail.com","hireable":true,"bio":"Dummy boi rules","public_repos":74,"public_gists":6,"followers":50000,"following":1,"created_at":"2013-08-01T14:17:19Z","updated_at":"2019-11-08T13:35:04Z"}',
    _json: {
        login: 'dummyboy',
        id: 3194523,
        node_id: 'ADQ541NiCUjKLmaaNgaA=',
        avatar_url: 'https://avatars3.githubusercontent.com/u/3194523?v=4',
        gravatar_id: '',
        url: 'https://api.github.com/users/dummyboy',
        html_url: 'https://github.com/dummyboy',
        followers_url: 'https://api.github.com/users/dummyboy/followers',
        following_url: 'https://api.github.com/users/dummyboy/following{/other_user}',
        gists_url: 'https://api.github.com/users/dummyboy/gists{/gist_id}',
        starred_url: 'https://api.github.com/users/dummyboy/starred{/owner}{/repo}',
        subscriptions_url: 'https://api.github.com/users/dummyboy/subscriptions',
        organizations_url: 'https://api.github.com/users/dummyboy/orgs',
        repos_url: 'https://api.github.com/users/dummyboy/repos',
        events_url: 'https://api.github.com/users/dummyboy/events{/privacy}',
        received_events_url: 'https://api.github.com/users/dummyboy/received_events',
        type: 'User',
        site_admin: false,
        name: 'dummyboy',
        company: 'dummyboy',
        blog: 'http://dummyboy.com',
        location: 'Mars',
        email: 'dummyboy@gmail.com',
        hireable: true,
        bio: 'Dummy boi rules',
        public_repos: 74,
        public_gists: 6,
        followers: 50000,
        following: 1,
        created_at: '2013-08-01T14:17:19Z',
        updated_at: '2019-11-08T13:35:04Z'
    }
}

Resources

Locations

OSX

  • redis.conf file location
    • sudo vi /usr/local/etc/redis.conf

General

  • https://devdocs.io/ CSS DOM DOM Events HTML HTTP JS documentation for everything
  • https://webgems.io/ Accessibility, CSS, Daily, Design, Frontend, Fullstack, General, HTML, Icons, Javascript, PHP, Podcasts, Python, Ruby, Server, Utility Resources

Design

UX

Axios

Security

SCSS

CSS

Vue

Vuex

Express

Redis

Passport

PG

Nuxt