can I store oauth client_secret on server instead of sending it from the frontend client so everyone can see it?

Question

I am building a client that will consume api. Using Laravel and vuejs for this. Backend is it's own app and frontend client is its own app that will run on vuejs.

Right now when I want to login user to the backend I have to send this data from client:

            form: {
                'grant_type' : 'password',
                'username': 'student@gmail.com',
                'password': 'pass1234',
                'provider': 'student',
                'client_id': "2",
                'client_secret' : 'fXz4bILqz5CnDjFCvXpw7RZWLgWXxsTa0LN1'
            }

How smart or dangerous is it to save secret in client like this? Now everyone can see it, can they use this in some way? And if its dangerous or if its not recommended how is everyone else doing it? If you are not sending oauth client_secret from the client, then where do you keep it?

Btw if anyone experience with building api:s is wondering why I mention provider here its because I am using multi-auth passport so I can authenticate different type of users with different providers. But my question is about security of storing client_secret inside javascript on frontend?

Answer 1

This is bad bad idea, you should never have client_secret on the client side,

Option 1:
Use the implicit grant. This grant is most commonly used for JavaScript or mobile applications where the client credentials can't be securely stored.

Option 2:
Make internal call to auth/token from your login controller. Something like the register in this solution here So, you will send the username/password to your login controller and the Login controller will make an internal call to get the token.