With internet users now having multiple accounts with many social media platforms, the use of social media authentication has now increased. When a user signs up using Facebook, for example, the fewer details they manually need to input the better. This is why we need to fetch data such as profile pictures automatically, instead of asking them to upload different ones. Let’s explore how we can do this easily in Nuxt.Js.

The final project can be viewed on Codesandbox.

You can find the full source code on my Github repository.

Nuxt.Js is a Vue.Js framework that allows us to build with confidence. To set it up, ensure you have either Yarn installed or NPM v5.2+ or v6.1+. Open your directory of choice and run the following command.

NUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloudinary-cloud-name>

# Receiving social network and identifier

In a real-life application, when the user authenticates using a social media option, we will automatically receive their social media network and their unique identifier. But for this demo, let us create a form that allows manual selection and input of these details. First, let us store the empty form state and the network options in the `script` section of our `pages/index.vue` file.

```js
// pages/index.vue
<script>
export default {
  name: 'IndexPage',
  data(){
    return {
      form:{
        network:null,
        identifier:'',
        submitted:false
      },
      networks:[
        {
          name:'Facebook ID (Numeric)', 
          value:'facebook',
          type:'number',
          hint:'For privacy protection reasons, Facebook no longer supports accessing user images based on the user name; only the application-specific numeric ID obtained through authentication.'
        },
        {
          name:'Twitter ID (Numeric)', 
          value:'twitter',
          type:'number',
          hint:'The Twitter user ID is the unique numeric obtained once the user has authenticated into your application'
        },
        {
          name:'Twitter Username (Alphanumeric)', 
          value:'twitter_name',
          type:'text',
          hint:'The Twitter username is the alphanumeric unique screen name for each twitter user account.'
        },
        {
          name:'Gravatar Email Address (Alphanumeric)', 
          value:'gravatar',
          type:'text',
          hint: 'The email address of the Gravatar user account'
        },
      ],
      ...
    },
    mounted(){
        this.form.network = this.networks[0];
    },
  },
  ...
}
</script>

As visible above, Cloudinary currently only supports the following social networks:

• Facebook (Numeric user ID)
• Twitter (Numeric user ID)
• Twitter (Alphanumeric username)
• Gravatar (Email)

Once the page is mounted, we will set our first network (Facebook) as our default selection. Let us now add the HTML form to allow user input and selection.

<!-- pages/index.vue -->
<form @submit.prevent="submit" @reset.prevent="reset">
    <div>
        <label for="network">
        Social network
        </label>
        <div>
            <select @change="unsubmit" required v-model="form.network" id="network" name="network" autocomplete="network">
                <option v-for="network in networks" :key="network.value" :value="network">{{network.name}}</option>
            </select>
        </div>
    </div>
    <div v-if="form.network">
        <label for="identifier">
        {{ form.network.name }}
        </label>
        <div>
            <input @keypress="unsubmit" required v-model="form.identifier" :type="form.network.type" name="identifier" id="identifier" />
            <p>
                {{form.network.hint}}
            </p>
        </div>
    </div>
    <div class="flex justify-end">
        <button type="reset">
        Reset
        </button>
        <button type="submit">
        Fetch
        </button>
    </div>
</form>
Code language: HTML, XML (xml)

Once a user submits or resets the form, the submit and reset methods are called respectively. The unsubmit method is called when a keypress is detected in the input or when the social network selection changes. Let us add them.

// pages/index.vue
<script>
import md5 from "`crypto-js`/md5";

export default {
  ...
  methods:{
    unsubmit(){
      this.form.submitted='false';
    },
    submit(){
      if(this.form.network.value === 'gravatar'){
        this.form.identifier = md5(this.form.identifier);
      }
      this.form.submitted='true';
    },
    reset(){
      this.form = {
        network:null,
        identifier:'',
        submitted:'false'
      };
      this.form.network = this.networks[0];
    }
  }
}
</script>
Code language: HTML, XML (xml)

Gravatar requires that the email address is encoded using the MD5 hash. We use the crypto-js package to do this, let us install it.

yarn add crypto-js
# OR
npm i crypto-js
Code language: PHP (php)

Once the form.submitted has been marked as true, we need to fetch the image. We will use the inbuilt CldImage component for this.

<!-- pages/index.vue -->
<div>
        <cld-image 
            v-if="form.submitted == 'true'" 
            :public-id="`${form.identifier}.jpg`" 
            :type="form.network.value" 
            :alt="`${form.network.value} - ${form.identifier}`"
        >
        </cld-image>
</div>
Code language: HTML, XML (xml)

We pass the identifier as the public-id and the network as the type. We also compute an alt text for display if loading fails. Now when the form is submitted, the image will be loaded into the component.

With the above knowledge, we are now able to improve our application’s user experience. To learn more about delivering profile pictures, feel free to review the Cloudinary documentation.