Главная » Языки программирования

Авторизация react redux typescript

Содержание
  1. create-react-app with Redux & TypeScript & Firebase Authentication [JavaScript]
  2. 😀 GitHub Repository
  3. 🎳 Get Firebase App info
  4. 🤔 create-react-app with Redux and TypeScript
  5. 🐰 Configuration
  6. 🎂 Rebuild folders
  7. 🐹 index
  8. Account: /h1>
  9. App
  10. Saved searches
  11. Use saved searches to filter your results more quickly
  12. brighton1101/react-redux-typescript-basic-auth-setup
  13. Name already in use
  14. Sign In Required
  15. Launching GitHub Desktop
  16. Launching GitHub Desktop
  17. Launching Xcode
  18. Launching Visual Studio Code
  19. Latest commit
  20. Git stats
  21. Files
  22. README.md
  23. About

create-react-app with Redux & TypeScript & Firebase Authentication [JavaScript]

Let’s implement a whole authentication mechanism in React & Redux with sign up, sign in, password reset, change password and sign out in TypeScript.

😀 GitHub Repository

Whole files of this tutorial are as follows:

🎳 Get Firebase App info

It will be needs for using Firebase authentication.

🤔 create-react-app with Redux and TypeScript

You can install create-react-app on command line:

# If you have not install it yet, please do:
yarn global add create-react-app # npm install -g create-react-app

# Create new project
create-react-app react-ts-firebase-auth —scripts-version=react-scripts-ts
cd react-ts-firebase-auth

# Install Firebase and react-router-dom (React Router)
yarn add firebase react-router-dom redux react-redux recompose

yarn add —dev @types/react-router @types/react-router-dom @types/react-redux @types/recompose

After then, you can run app process by yarn start on terminal and open http://localhost:3000 .

Also, please create some directories:

🐰 Configuration

Please change tslint.json to add as follows:

🎂 Rebuild folders

# Create folders
mkdir src/components
mkdir src/components/Account
mkdir src/components/App
mkdir src/components/Home
mkdir src/components/Landing
mkdir src/components/Navigation
mkdir src/components/PasswordChange
mkdir src/components/PasswordForget
mkdir src/components/Session
mkdir src/components/SignIn
mkdir src/components/SignOut
mkdir src/components/SignUp
mkdir src/constants
mkdir src/firebase
mkdir src/reducers
mkdir src/store

# Move files for App
mv src/components/App.ts src/components/App/index.ts

# Remove unused files
rm src/logo.svg
rm src/App.test.ts
rm src/App.css

🐹 index

import * as React from «react»;
import * as ReactDOM from «react-dom»;
import < Provider >from «react-redux»;
import < App >from «./components/App»;
import «./index.css»;
import registerServiceWorker from «./registerServiceWorker»;
import < store >from «./store»;

ReactDOM.render(
;
import < connect >from "react-redux";
import < compose >from "recompose";
import < withRouter >from 'react-router-dom'

import < PasswordChangeForm >from "../PasswordChange";
import < PasswordForgetForm >from "../PasswordForget/PasswordForgetForm";
import < withAuthorization >from "../Session/withAuthorization";

const AccountComponent = (< authUser >: any) => (

Account: /h1>


>

/div>
);

const mapStateToProps = (state: any) => (
authUser: state.sessionState.authUser
>);

const authCondition = (authUser: any) => !!authUser;

export const Account = compose(
withAuthorization(authCondition),
withRouter,
connect(mapStateToProps)
)(AccountComponent);

App

Create src/components/App/index.tsx file:

import * as React from «react» ;
import < BrowserRouter, Route, Switch >from «react-router-dom» ;
import * as routes from «../../constants/routes» ;
import < firebase >from «../../firebase» ;
import < Account >from «../Account» ;
import < Home >from «../Home» ;
import < Landing >from «../Landing» ;
import < Navigation >from «../Navigation» ;
import < PasswordForget >from «../PasswordForget» ;
import < withAuthentication >from «../Session/withAuthentication» ;
import < SignIn >from «../SignIn» ;
import < SignUp >from «../SignUp» ;

class AppComponent extends React.Component <
constructor ( props: any ) <
super (props);

this .state = <
authUser: null
>;
>

public componentDidMount() <
firebase.auth.onAuthStateChanged( authUser => <
authUser
? this .setState( () => (< authUser >))
: this .setState( () => (< authUser: null >));
>);
>

public render() <
return (

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Creating a LoginContainer and simple auth class and managing auth using redux state/localStorage. Just for practice, definitely not perfect.

brighton1101/react-redux-typescript-basic-auth-setup

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

React-Redux Typescript Auth Container Example

Essentially, this is just an example for how to create an auth reducer and load auth into app’s Redux state.

  • Conditionally shows LoginContainer in App Component if not logged in per redux state
  • Binds login state to App component
  • Binds dispatch to both App / LoginContainer components
  • Uses an Auth class’ static methods to perform mock login actions
  • Separates logic component (LoginContainer) from presentational components (LoginButton and LoginModal)

About

Creating a LoginContainer and simple auth class and managing auth using redux state/localStorage. Just for practice, definitely not perfect.

Источник

Читайте также:  Таблица
Оцените статью
© 2024 Программирование