https://github.com/oktadev/okta-react-styled-components-example
React Styled Components Example
https://github.com/oktadev/okta-react-styled-components-example
css javascript reactjs styled-components
Last synced: about 1 year ago
JSON representation
React Styled Components Example
- Host: GitHub
- URL: https://github.com/oktadev/okta-react-styled-components-example
- Owner: oktadev
- License: apache-2.0
- Created: 2020-03-04T14:40:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T20:50:23.000Z (about 6 years ago)
- Last Synced: 2025-04-11T15:14:16.233Z (over 1 year ago)
- Topics: css, javascript, reactjs, styled-components
- Language: JavaScript
- Homepage: https://developer.okta.com/blog/2020/03/16/react-styled-components
- Size: 398 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Styled Components Example
This example app shows how to create a React app and use Styled Components for its CSS.
Please read [Build a React App with Styled Components](https://developer.okta.com/blog/2020/03/16/react-styled-components) to see how this app was created.
**Prerequisites:**
* [Node 12+](https://nodejs.org/en/) installed
* An [Okta Developer Account](https://developer.okta.com/signup)
> [Okta](https://developer.okta.com/) has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.
* [Getting Started](#getting-started)
* [Links](#links)
* [Help](#help)
* [License](#license)
## Getting Started
To install this example application, run the following commands:
```bash
git clone https://github.com/oktadeveloper/okta-react-styled-components-example.git
cd okta-react-styled-components-example
npm install
```
### Create an OIDC App on Okta
Register a new application by going to **Applications** > **Add Application**. On the next screen, choose **Single Page App** and click **Next**.
On the following screen, you can edit the application's settings. Make sure that the port number is 3000 and the base URI is `http://localhost:3000/`. Change the Login Redirect URI to `http://localhost:3000/callback`. Once you are done, you will see a **Client ID**.
### Configure your Okta Settings
Copy your Okta domain and client ID into `src/App.js`:
```js
function App() {
return (
);
}
```
Start everything with `npm start` and you'll be able to login with React and Okta!
## Links
This example uses the following open source libraries:
* [React](https://reactjs.org/)
* [Styled Components](https://styled-components.com/)
* [Okta React SDK](https://github.com/okta/okta-oidc-js/tree/master/packages/okta-react)
## Help
Please post any questions as issues in this repository, or visit our [Okta Developer Forums](https://devforum.okta.com/).
## License
Apache 2.0, see [LICENSE](LICENSE).