How to integrate routing for google authentication?

Get Help and Help Others
1

So I am moving from my previous application where I had a separate Client and Server Project. When adding google authentication I was able to direct the client on a button click to a certain backend url like backend-url/auth/google and inside of my backend in my index.js i had a simple app.get() that handled that route and then i use a google passportjs strategy that then displays the third party google auth screen to the client and then upon a successful login/signup, they are redirected to a call back route in the backend which then redirects the client to a url in the browser.

However, since moving to redwood, I have no clue how to do this. I have a file called graphql.js inside of my functions folder so that i can access graphql at localhost//:8911/graphql but when i tried to add the app.get() inside of graphql.js and handle the button click from the frontend to trigger google auth, it says theres no route to handle that. I tried creating another file in functions and route to it, still no luck. What am i missing here, or do you have any idea how I can implement this in redwood? Does this have to do with the fact that theres a proxy server? Note that for Google auth to work, I must use an href or link to the backend url that handles the google auth, it cannot be an axios or ajax call.

2

Hi @ShehabSN Excited you’re trying out Redwood! Things are still (very) early here, so we don’t have an official auth package yet. But auth is in progress, and you can expect integration from Redwood directly in the months ahead.

In the meantime, I have some ideas for you, although I have no experience setting up Google Auth for a React application. (Note: Redwood is effectively 2 primary components 1) a GraphQL API using Apollo and 2) a React front-end with some special sauce :wink:). Looking for examples of integrating Google Auth with React and/or GraphQL, here are some examples I found that seemed of interest:

Lastly, here’s an example posted on our forum about setting up Redwood with a different auth provider, Firebase: How to: Authentication with RedwoodJS

Does anyone else have some recommended next steps or examples to help here?

3

Hi @thedavid, the main issue I am facing is setting up a basic express route handling for a specific endpoint in the redwood api. Right now there is a GraphQL API but where can i add the handling of a request at a specific endpoint? This does not need any GraphQL logic, as I just want to add an app.get(’/auth/google’ on my server. Essentially I am asking how do i add route handling on the server, adding it in the graphql.js inside functions did not work so is there another way? I have all the actual Auth logic done already it was working on my previous non redwood project all i need is to be able to send a request to the server and have that server handle the request at that specific route.

As simple as it sounds, say an href from the client side to a backend url named backend-url/auth/google and then have an app.get(‘auth/google’ handler in the server handle that. That’s all i need to do

4

Redwood has a GraphQL API, so there is no REST API available out of the box. But there are ways to set up Express Middleware with GraphQL for Auth. However, I’m out of my depth as to how this would need to be implemented into Redwood’s API structure (most likely as a service). So calling in some help from @peterp

Lastly, this cookbook article on using a third-party API with Redwood demonstrates how the GraphQL services work.

5

Hey @ShehabSN :wave:

It’s not obvious, but you can add your own route handlers in the src/api/functions directory. Here’s a quick example I whipped-up:

// src/api/functions/random.js

export const handler = (event, context, cb) => {
  console.log(event, context)
  cb({ hello: 'world' })
}

After starting up Redwood (yarn rw dev) you can visit http://localhost:8911/random and this will get printed to the page:

{ "hello": "world" }

On the command-line, you’ll see the following output. I just did this to help you see what kind of data is passed in via the event and context arguments:

11:23:24 api | {
11:23:24 api |   httpMethod: 'GET',
11:23:24 api |   headers: {
11:23:24 api |     host: 'localhost:8911',
11:23:24 api |     connection: 'keep-alive',
11:23:24 api |     pragma: 'no-cache',
11:23:24 api |     'cache-control': 'no-cache',
11:23:24 api |     'upgrade-insecure-requests': '1',
11:23:24 api |     'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36',
11:23:24 api |     'sec-fetch-dest': 'document',
11:23:24 api |     accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9',
11:23:24 api |     'sec-fetch-site': 'none',
11:23:24 api |     'sec-fetch-mode': 'navigate',
11:23:24 api |     'sec-fetch-user': '?1',
11:23:24 api |     'accept-encoding': 'gzip, deflate, br',
11:23:24 api |     'accept-language': 'en-US,en;q=0.9',
11:23:24 api |     cookie: '_ga=GA1.1.1241974949.1584989253'
11:23:24 api |   },
11:23:24 api |   path: '/random',
11:23:24 api |   queryStringParameters: {},
11:23:24 api |   body: '',
11:23:24 api |   isBase64Encoded: false
11:23:24 api | } {}

I hope this helps!

1 Like