Authentication JWT React JS Lumen 7
Authentication JWT React JS Lumen 7 – Pada artikel kali ini kita akan belajar membuat Front End Authentication menggunakan JWT (JSON Web Token) menggunakan React JS.
Untuk Back End kita menggunakan Lumen 7. Anda bisa melihat pada artikel sebelumnya disini.
Authentication JWT Lumen 7
Authentication JWT React JS Lumen 7
Create Project
Buat project baru dengan nama reactjs-auth-jwt-lumen7.
Dari command prompt ketikkan perintah berikut:
|
1 2 3 4 |
cd H:\sourcecode npx create-react-app reactjs-auth-jwt-lumen7 |
Install Dependecies
Dari command prompt ketikkan perintah berikut:
|
1 2 3 4 5 6 7 8 9 |
cd reactjs-auth-jwt-lumen7 npm install react-router-dom npm install bootstrap npm install axios npm install redux react-redux redux-thunk npm install --save-dev redux-devtools-extension npm install react-validation validator |
Services
Buat folder baru dengan nama services pada direktori src.
auth.service.js
Buat file baru dengan nama auth.service.js pada direktori src/services kemudian ketikkan script berikut:
Simpan file auth.service.js
auth-header.js
Buat file baru dengan nama auth-header.js pada direktori src/services kemudian ketikkan script berikut:
Simpan file auth-header.js
user.service.js
Buat file baru dengan nama user.service.js pada direktori src/services kemudian ketikkan script berikut:
Simpan file user.service.js
Actions
Buat folder baru dengan nama actions pada direktori src.
types.js
Buat file baru dengan nama types.js pada direktori src/actions kemudian ketikkan script berikut:
Simpan file types.js
message.js
Buat file baru dengan nama message.js pada direktori src/actions kemudian ketikkan script berikut:
Simpan file message.js
auth.js
Buat file baru dengan nama auth.js pada direktori src/actions kemudian ketikkan script berikut:
Simpan file auth.js
Redux Reducers
Buat folder baru dengan nama reducers pada direktori src.
message.js
Buat file baru dengan nama message.js pada direktori src/reducers kemudian ketikkan script berikut:
Simpan file message.js
auth.js
Buat file baru dengan nama auth.js pada direktori src/reducers kemudian ketikkan script berikut:
Simpan file auth.js
index.js
Buat file baru dengan nama index.js pada direktori src/reducers kemudian ketikkan script berikut:
Simpan file index.js
Redux Store
store.js
Buat file baru dengan nama store.js pada direktori src kemudian ketikkan script berikut:
Simpan file store.js
Components
Buat folder baru dengan nama components pada direktori src.
Register.js
Buat file baru dengan nama Register.js pada direktori src/components kemudian ketikkan script berikut:
Simpan file Register.js
Login.js
Buat file baru dengan nama Login.js pada direktori src/components kemudian ketikkan script berikut:
Simpan file Login.js
Profile.js
Buat file baru dengan nama Profile.js pada direktori src/components kemudian ketikkan script berikut:
Simpan file Profile.js
Home.js
Buat file baru dengan nama Profile.js pada direktori src/components kemudian ketikkan script berikut:
Simpan file Home.js
Routes
Buat folder baru dengan nama helpers pada direktori src.
history.js
Buat file baru dengan nama history.js pada direktori src/helpers kemudian ketikkan script berikut:
Simpan file history.js
App.js
Buka file App.js pada direktori src kemudian edit menjadi seperti berikut:
Simpan file App.js
App.css
Buka file App.css pada direktori src kemudian edit menjadi seperti berikut:
Simpan file App.css
Testing Authentication JWT React JS Lumen 7
Dari command prompt jalankan React JS menggunakan perintah berikut:
|
1 2 3 4 5 6 7 |
npm start --- atau --- yarn start |
Selanjutnya buka browser dan ketikkan URL http://localhost:3000
Note: Jangan lupa untuk menjalankan Back End Server.
Registrasi
Pilih menu Register kemudian coba inputkan data user baru seperti berikut:
Login
Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:
Jika berhasil login maka akan tampil menu Profile seperti berikut:
Sampai disini kita sudah berhasil membuat authentication JSON Web Token menggunakan React JS dan Lumen 7. Pada artikel selanjutnya kita akan bahas React JS dan Lumen 7 lebih jauh lagi.
Semoga bermanfaat.
Source Code bisa anda download disini:
