In this tutorial we will create a React app using the official Redux+Typescript template and add OAuth 2.0 user authorization. The OAuth 2.0 authorization in this tutorial is used to connect to Spotify’s Web API, but can be used for any service with the same authorization flow. The web app created in this tutorial is a stand-alone client-side web app with no server-side application needed.
tl;dr
Code result in this template. But I still recommend following the tutorial :)
Npm is required for this tutorial and can be installed here.
Tutorial
Step 1: Create a React app with Typescript and Redux
Run the command below:
npx create-react-app my-app --template redux-typescript
Your app is now installed with a premade example of a counter to show how you can use the Redux store. Change directory to _my-app _( cd my-app ) and run the following command to run the app locally:
npm start
You should see the counter example in your browser at http://localhost:3000.
The basics: To understand the basics of the template code let us start by looking at _index.tsx _in the src folder. The line <Provider store={store}>makes the Redux store available to all nested components, which is currently the <App /> component. The App component is defined in _App.tsx_and is the main React component. By looking at the contents of App.tsx we see the Counter component being included with <Counter /> along with the rest of the text we can see at localhost:3000. All code for the counter is in the _src/features/counter _folder. The Counter component is written in _Counter.tsx _and the code for managing its Redux state is in counterSlice.ts. The Redux store itself is defined in store.ts in the _src/app _folder.
Don’t worry if you don’t understand everything at the moment. It will be more clear as you follow the next steps.
Optional step: Upload to a git repository
With your favorite Git-repository manager (GitHub/GitLab/Bitbucket/…): Create an empty repository without readme, gitignore or license. Copy the url of the repo. On your computer: change working directory to my-app and push your code:
cd my-app
git remote add origin remote_repository_url
git push -u origin master
Step 2: Acquire relevant OAuth 2.0 information
We need the following for our authorization setup:
- Authorization URL
- Client ID
- Redirect URI
- Scopes
Quick explanation: Authorization URL is the base URL to the authorization service (e.g.: https://accounts.spotify.com/authorize). Client ID is an identifier for your specific application. Redirect URI is where the authorization service should redirect the user after a successful login through their service (usually the URL of your application). The _scopes_define what type of user data you want to access with your application.
Authorization URL,_ client ID_ and scopes will depend on which service you are using for authorization. For this tutorial we will implement user authorization with Spotify, which is described here (implicit grant flow). The following paragraph is specific to Spotify’s web API.
To use the Spotify API you need to register your app by logging in to the developer dashboard and register a new app. When the app is registered, press **edit settings**and add http://localhost:3000 to Redirect URIs. Remember to add other URI’s if you deploy your web app or you want to work locally on another port than 3000. You will find your _client ID _on the page of your registered app. All scopes for the Spotify API are listed here.
#typescript #javascript #react #oauth #redux
