How to get the full SendGrid API Key?

The API KEY is generated and displayed to you just once. So be sure to copy and save it somewhere. After that only the subset key is displayed.

It is mentioned as part of the documentation over here as a warning/alert.

The sub-string "ngeVfQFYQlKU0ufo8x5d1A" is the API Key.

The sub-string you're referring to is not the API key, it is the API key ID.

What is the rest of this stuff and how did they generate this entire/full string?

The full string is the whole API key, it is divided into 3 sections and separated by dots. So API KEY = SG.ID.VALUE:

• SG: A fixed value appended at the start of every SG API key, I am assuming SG stands for "SendGrid".
• ID: This is the key ID used to reference the key when editing and deleting it through the API, It is not the actual key. so if this was your API key: SG.aaaa.bbbb, the api_key_id would be aaaa.
• VALUE: This is the key value which you're allowed to read once only.

How to get the full SendGrid API Key?

There are only two methods of doing so; Through the SendGrid UI or API. Both are accessed at creation time and you're only allowed to read the key value once.

• API: In order to create and read keys from the API, you need to have prior access to the API, which means you need to create an initial API key using the SendGrid UI. Afterwards, you can just POST to /api_keys.

Here is an example using the official SendGrid web API v3 client via Node.js:

import sgClient from '@sendgrid/client';

/** Your initial API key from the SendGrid UI */
sgClient.setApiKey(process.env.SENDGRID_API_KEY);

let req = {
  method: 'POST',
  url: '/v3/api_keys',
  body: { name: 'NEW_SG_KEY' }
};

sgClient.request(req)
  .then( ([res, body]) => {
    console.log(`key: ${body.api_key}`);
    console.log(`ID:  ${body.api_key_id}`);
  })
  .catch( err => {
    console.log(`Unable to create new API key: ${err.code} ${err.message}`);
  });