Cannot resolve dependency './settings-code' at '...\example\client\src\settings-code'

[JKamsker]

Running npm start in the example client folder returns

Server running at http://localhost:1234
×  react-simple-oauth2-login\example\client\src\AuthorizationCodeExample.js:11:7: Cannot resolve dependency './settings-code' at 'react-simple-oauth2-login\example\client\src\settings-code'
   9 |   oauthServerUrl,
  10 |   scope,
> 11 | } from './settings-code';
     |       ^
  12 |
  13 | export default function AuthorizationCodeExample() {
  14 |   const [accessToken, setAccessToken] = useState(null);

How can i fix this?

[Coow]

This isnt an issue with the Package, but with your code. Try making sure the file (./settings-code) exists, and the path to it is correct.

[JKamsker]

@Coow Thanks for your answer. I use the current state of the master branch. I think this file should be included by the maintainer if missing.

[bhubr]

Hey @JKamsker,

Thanks for your question, and thanks @Coow for answering it.

I haven't been very active lately, but this makes me realize I should revamp the examples a little, or at least document them better.

The example app aims to demonstrate the two possible flows: authorization code & implicit grant (a third is in progress).

The App component imports two components: AuthorizationCodeExample and ImplicitGrantExample. Each of them needs its own configuration file: settings-code.js and settings-implicit.js, respectively.

Each of these files can be created by copying the common settings.sample.js template file as settings-code.js and/or settings-implicit.js. In this file, authorizationUrl, clientId and redirectUri are mandatory, whether you use auth code or implicit grant flow. serverUrl is only mandatory for the auth code flow.

The reason why I didn't include the files in the repo is that they contain sensitive information. Had I used Create React App, it would have been possible to use environment variables.

Since you probably need only one of the two flows, feel free to remove or comment out the unnecessary one from App.js.

Which one mostly depends on the OAuth provider you choose. E.g. GitHub supports only auth code flow, while Spotify supports both auth code & implicit grant.

Please let me know if that clarifies things a bit!

[JKamsker]

Thank you very much for this explanation! (As you might have guessed...im not that good in react) Ill let you know if i have further problems with the settings down the line :)

[bhubr]

You're welcome! No, I actually didn't make assumptions!

I realized that I did explain this in the Readme, but it's buried under a lot of stuff... So, as I often do, people will often TL;DR and won't see it!

So I'm leaving the issue open, until I take time to really improve the example!

And of course, let me know of any issue you encounter. Getting a fresh perspective often helps to improve the docs.