Why is the beginning of the URL undefined for custom app?

I am following the starter docs here and I solved some minor issues up to the actual authorization section. I was able to get the ngrok redirect server up and working. I set my .env config with my secret/ID, server host, and port.

When I run “npm run dev”, I am able to go to the redirect link and click the “Authorize Webflow” button on the ngrok link. After that, I am met with a " This site can’t be reached" error. Below the error, I see a DNS error “DNS_PROBE_FINISHED_NXDOMAIN”. I’ve tried some solutions from Google, but can’t get anything to work since the first part of the URL it tries to redirect to after is “https://undefined/oauth/authorize”.

I’m not seeing the part about which parts the application has access to (e.g the workspace). I also don’t see the “awesome you’re authorized” page.

undefined suggests an uninitialized JS var, so if you check your code for /oauth/authorize you’ll find where the uninitialized variable is.

From your description it sounds like the very first call from your site to Webflow, which initiates the authorization process.

I don’t see that directory anywhere for /oauth/authorize. I also noticed that in the docs is says to cd into hello-world/node, but there isn’t a node directory.

That’s not a directory, it’s part of the auth URL, you’ll need to search for the text.
Somewhere you’ve missed a configuration step. The code would be a general purpose example of OAuth, tailored to Webflow’s specific OAuth setup.

That URL will ultimately be https://webflow.com/oauth/authorize

But rather than hardcoding it, you should just figure out where your setting are pulling from and set the hostname portion that’s currently undefined

There is no /oauth/authorize in the repo, the closest thing is /authorize. It’s pulling in my client_id correctly because I have purposefully tried to mess that up and it gave me an error that a client_id is required. These are the only 2 methods referring to redirects in the repo
Capture

Redirects happen after the initial request. Your URL error is in the initial request.
Have a look at Webflow’s OAuth 2 docs above, you can see the URL where I’ve linked.

** The wrong URL pasted in my initial message, fixed now

When you’re building systems like these, it’s very easy to miss one tiny detail or config item in the docs. The best way is usually just to go back to the top of the docs and walk through again. I built my implementation custom ( not based on the starter app ), but used only these links which are all in the Webflow docs;

https://www.rfc-editor.org/rfc/rfc6749#section-4.1

I’ve walked through it a couple of times and have made sure everything is done the same way.



I’m not using the repo so I’m not certain what parts it handles-
However the very first request you make to trigger the oauth process contains /oauth/authorize.

From the sound of it, you have a piece of js code doing that, but the domain variable isn’t in initialized to 'webflow.com'… thus you’re getting undefined in your resulting string.

Hey Sam,
Not exactly on-topic, but I’ll play.

No, I’m a managing consultant and developer who runs a private tech consultancy. We primarily build SaaS solutions and custom web applications, with a specialization in data-rich apps like LMS’s and CRM’s. You may have guessed we that we do a ton of work with Webflow.

@webdev 's name is Jeff. He’s been helping here a good deal longer, great guy.
Not sure what you mean by “never have solutions”, 161 isn’t bad. Don’t worry you’ll get more, just keep contributing.

Unfortunately a lot of people post questions without giving access to their projects, or showing their code, so the best you can do is point them in the right direction and tell them what to look for.

Excellent question, and there are 3 reasons.

  1. I bore easily, and enjoy solving problems. This is better than a video game.
  2. Helping people is fun, and rewarding
  3. I learn TONS. Every day, new problems, leading to new solutions. It’s great.
3 Likes

I got it to work. Instead of using the Webflow API authorizeUrl method that they provide, you have to set it manually and then tack on the client ID at the end like this:

https://webflow.com/oauth/authorize?response_type=code&client_id=<insert client id>

Seems the method just doesn’t work or the onboarding docs are missing a step?

I’m going to look further into the actual API methods around OAuth, but nothing so far.

+1 Bumping that the “Getting Started” guide does not work if followed step-by-step. I’m not sure if the documentation is wrong, something is missing from the repo, or a combination of both.

Would be nice to have Webflow update the documentation/repo to address this, as having people get stuck on a “starter” guide probably isn’t the best user experience.