Projects
beberapa project yang pernah saya kerjakan
Implementasi Google OAuth dengan Remix-Js
| Live Demo | remix-oauth.amiminn.com |
| Github Repo | remix-oauth-google |
- Bun
- Remix
- React
- Typescript
Pada project kali ini saya akan mengimplementasikan OAuth Google dan Remix dengan Skema simpel 2 arah seperti yang dilihat pada gambar dibawah. dengan configurasi yang cukup minim sehingga sekiranya lebih mudah diimplementasikan tanpa pusing setup configurasi ini itu 😪.
Baik langsung saja kita mulai.
Untuk permulaan, siapkan terlebih dahulu Client-id dan Client-secret pada akun google. kunjungi Console Cloud Google -> Api & Services -> Credentials dan isi beberapa form sesuai dengan kebutuhan app masing-masing, dan terakhir pada input Authorized isi dengan url utama serta url callback.
setelah selesai, mari kita lanjut ke project RemixJs
install dependencies
siapkan file baru sesuai yang dibawah ini, lalu masukkan beberapa configurasi yang didapat dari Google Console sebelumnya.
app/lib/google.ts
pada index, disini saya siapkan url untuk menuju google auth nya
app/routes/_index.tsx
pada callback, disini bebas mau diolah seperti apa datanya. yang terpenting dari google success merespon request data nya.
app/routes/auth.google.callback.tsx
Hmm,.. cukup 3 file dan beres 😪
Untuk Demo dan Repositori Github dapat dilihat diatas.