Troubleshooting
This page aims to provide some tips to help avoid issues that may arise with the SDK primarily during development. If you are facing an issue that is not outlined in this document please reach out to us so we can help.
Local Development
During local development there are a couple of issues you may face that make setting up a little tricky.
https and Authorization Flows
Internally WithWine Auth requires the refering party to supply the intended return URL that the user is redirected to after the login process has been completed. This URL must match the URL stored on the WithWine backend so that it can be verified before any redirects occur. If the supplied URL doesn't match the URL stored in the WithWine backend, you'll likely encounter the following error upon attempting to login:
We're sorry, an error has occurred
invalid_request The specified 'redirect_uri' parameter is not valid for this client application.
If you see this error, check that your appBaseUrl is the same as the URL that
is stored in the WithWine backend. If you are unsure where to find the stored
URL please consult your account manager.
Setting up your local environment for https
Depending on your framework you might be required to use a custom server to
allow your site to connect over SSL. The first thing you will need is a
certificate and a key. Create a directory called cert in the root of your
project the cd into the cert directory. From here you can run the following
commands to install a self signed certificate for development.
openssl genrsa -out key.pem
openssl req -new -key key.pem -out csr.pem
openssl x509 -req -days 9999 -in csr.pem -signkey key.pem -out cert.pem
rm csr.pem
After you've executed these commands and worked your way through the prompts you
should have two files in your cert directory, key.pem and cert.pem.
Depending on the framework you are using you now need to create a custom server.
For Next.js create a server.js file in your project root directory and add
the following:
/**
* Custom Server for local development to allow HTTPS
*/
const { createServer } = require('https');
const fs = require('fs');
const { parse } = require('url');
const next = require('next');
const port = 443;
const app = next({ dev: true });
const handle = app.getRequestHandler();
const httpsOptions = {
key: fs.readFileSync('./cert/key.pem'),
cert: fs.readFileSync('./cert/cert.pem'),
};
app.prepare().then(() => {
createServer(httpsOptions, (req, res) => {
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(port, (err) => {
if (err) throw err;
console.log(`> Custom server ready!`);
});
});
The above example is a basic implementation of a Node.js https server that
implements next as the app. This pattern is easily transferable to other
frameworks or even custom apps running on express.
You'll now want to make sure that this custom server is handling your Next.js
app, open the package.json file and change the dev script to:
{
...
"scripts": {
...
"dev": "node server.js"
...
},
...
}
Now when you run your server, your app will be served from
https://localhost:443. However this is not enough to get authorization
working, you'll also need make a change to your host file so your domain will
be used in place of localhost.
::1 stage.yourappurl.com
127.0.0.1 stage.yourappurl.com
127.0.0.1 https://stage.yourappurl.com
If your site includes www you'll need to add a record that includes the www
::1 www.yourappurl.com
127.0.0.1 www.yourappurl.com
127.0.0.1 https://www.yourappurl.com
After making these changes restart your development server and your local development app should now be running on the specified URL. As long as this URL matched the URL stored in the WithWine backend you should be able to run the Authorization flow without issues.
It's important to note that if you wish to visit your real staging server,
you'll need to update the hosts file by commenting out the entries we added
above, otherwise you'll be routed to your local development server instead of
the intended remote staging server.