Cant connect gmail via oauth

[Steven_W]

• Goal: I'm trying to set up a rest api resource for gmail so that I can send emails. Retool email doesn't support your own "from" email adres and smtp will not work anymore with gmail this year.

• Steps: I've tried to follow several how-to's and old posts on this forum. But I think I might be missing something trivial.

• Details: The error I get when I try to run a rest call:
  * error:"{"error":{"code":401,"message":"Request had invalid authentication credentials. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.","errors":[{"message":"Invalid Credentials","domain":"global","reason":"authError","location":"Authorization","locationType":"header"}],"status":"UNAUTHENTICATED"}}"
  You can see it in the first screenshot.
  On the other screenshots you can see the oauth setup.

• Screenshots:
  

  

[MiguelOrtiz]

Following as this has been in my todo list for a while and it would be great to have a Wiki/walk-through somewhere.

[Steven_W]

I’ve tried the docs google and retool docs. But it seems I’m missing something.

(I set up the google cloud web app client id as well. In the screenshot I removed some text from the client id because I don’t want it to be public on a forum).

Hopefully someone can help us out here before the Gmail smtp support drops.

Also,… it’s not only gmail and smtp. Other google apps will need to be accessed by oauth as well this year. At least that’s what I think. They will remove support for “less secure app access”.

Perhaps someone from retool can make a step by step howto so people can migrate to oauth.

[Shawn_Optipath]

Hello @MiguelOrtiz, @Steven_W,

I was trying to do the same thing yesterday and got it to work.

Setup your Gmail connection with Rest API (using OAuth 2.0)

Setup your resource query.
If you use a send as, include it here as well

Setup a transformer to handle the email:

const to = {{ form1.data.emailInput }}.split(',').map(email => email.trim()).join(', ');
const subject = {{ form1.data.subjectInput }};
const body = {{ form1.data.messageInput }}.replace(/\n/g, '<br>'); // Replace newlines with <br> tags
const signature = '<br><br>Thanks for choosing Optipath Systems'; // Added HTML line breaks for separation
const fromName = '=?utf-8?Q?=E2=9D=84=EF=B8=8F_xxxx'; // Quoted-Printable encoding for emoji
const fromEmail = 'yoursendasemail@abc.ca';
const from = `${fromName} <${fromEmail}>`;

const utf8Subject = `=?utf-8?B?${btoa(subject)}?=`;
const messageBody = `${body}${signature}`;
const messageParts = [
  `From: ${from}`,
  `To: ${to}`,
  'Content-Type: text/html; charset=utf-8',
  'MIME-Version: 1.0',
  `Subject: ${utf8Subject}`,
  '',
  messageBody,
];
const message = messageParts.join('\n');

// Base64url encode the message
const encodedMessage = btoa(unescape(encodeURIComponent(message)))
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=+$/, '');

return encodedMessage;

Create a form to pass the variables and submit:

That should do it!

Credit also to Kyle in this post.

[MiguelOrtiz]

This is brilliant, thanks @Shawn_Optipath

[Steven_W]

After trying to connect it still displays this in the picture above.

Even though it redirect when I have clicked this button:

[Shawn_Optipath]

Can you share a few screenshots with your setup in both Retool and the OAuth 2.0 Client IDs (https://console.cloud.google.com/apis/credentials/oauthclient)?

Also any messages in your Console? (Debug tools in the bottom right)

[Steven_W]

@Shawn_Optipath need more?

[Shawn_Optipath]

Try changing your Authorization URL to:
https://accounts.google.com/o/oauth2/auth

You may also need to add your domain as a redirect in Google. Try adding these to your Authorized redirect URIs in the Google console:

https://bobbill.retool.com/oauth/oauthcallback
https://bobbill.retool.com/oauth/user/oauthcallback

[Steven_W]

When I click on allow it redirects me back to the resource and it still says "not yet connected"

I really don't understand why this is so difficult to get working.

[Shawn_Optipath]

Did you enable the Gmail API?

[Steven_W]

I had not. But now I enabled it. Do I have to change any settings? Because tried again with the resource. I don’t get any error but it still says it’s not connected.

It says it worked. But on the page itself it says it’s not connected

[Steven_W]

I disabled “share between users”. and it worked suddenly.

Thanks for all the help! Much appreciated!

[Shawn_Optipath]

Glad you got it to work!

[Steven_W]

I would have given up if it were not for your help.

[Steven_W]

@Shawn_Optipath

What does this do actually?

const fromName = '=?utf-8?Q?=E2=9D=84=EF=B8=8F_xxxx'; // Quoted-Printable encoding for emoji

Do I replace this just with the sender name or does it need to be formatted/encoded somehow?

[AbbeyHernandez]

@Shawn_Optipath

fromEmail = 'yoursendasemail@abc.ca';

Hey @Steven_W,

The encoded string =?utf-8?Q?=E2=9D=84=EF=B8=8F_xxxx?= uses the Quoted-Printable encoding for the Unicode characters.

• =E2=9D=84 corresponds to the Unicode character U+2744, which is the (Snowflake) emoji.
• =EF=B8=8F is a variation selector that modifies the preceding character to ensure it is displayed as an emoji.

The following variable from would end up equalling something like
❄️ <example-email@example.com>

[Steven_W]

[Shawn_Optipath]

Thanks for responding @AbbeyHernandez.

Yes, it's what I used to show an emoji as it wasn't converting correctly. Unnecessary in most cases, but you have it now. 0r U+1F642