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:

 

Install Dependecies

Dari command prompt ketikkan perintah berikut:

 

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:

 

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:

Gbr1 Authentication JWT React JS Lumen 7 – Register
Gbr1 Authentication JWT React JS Lumen 7 – Register

 

Login

Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:

Gbr2 Authentication JWT React JS Lumen 7 – Login
Gbr2 Authentication JWT React JS Lumen 7 – Login

Jika berhasil login maka akan tampil menu Profile seperti berikut:

Gbr3 Authentication JWT React JS Lumen 7 – Profile
Gbr3 Authentication JWT React JS Lumen 7 – Profile

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:

Dewaweb Gives Your Website Only the Best!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *