Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Maybe this is a little thing for getting user informations inside getSession function. #699

Open
2 of 5 tasks
adorratm opened this issue Mar 4, 2024 · 4 comments
Open
2 of 5 tasks
Labels
question A question about NuxtAuth

Comments

@adorratm
Copy link

adorratm commented Mar 4, 2024

Describe the feature

First of all, my English is not good and I think we can work more flexibly if an update comes so that the getSession method can be used in this way.

Some rest api's is not well designed for frontend developers. Here is a scenario:

I have 2 endpoints for getting a bearer token and these endpoints are accept only "POST" method.

First endpoint is '/oauth/token' getting Email, Password, GrantType, Scope, ClientId, ClientSecret, RedirectUri fields in posted data and this endpoint returns AccessToken, RefreshToken, ExpiresAt, TokenType

Second endpoint is '/user/user-information' this endpoint accessible with Email field inside posted data and Authorization Bearer token.

When I look the Sidebase/Nuxt-Auth documentation I see for getting user data to use this method: getSession, I will use this method after send the signIn event but the getSession method don't accept the custom request body. For example:

<script setup lang="ts">

const config = useRuntimeConfig()
const {$toast} = useNuxtApp();

const Email = ref('');
const Password = ref('');

const login = async()  => {
try {
  await signIn({
    Email.value,
    Password.value,
    config.GrantType,
    config.Scope,
    config.ClientId,
    config.ClientSecret,
    config.RedirectUri
  },{ redirect: false })

  await getSession('/user/user-information', // This variable maybe passed for setting user info endpoint
  {
    Email: Email.value // This variable maybe passed in here as a request body this method for getting user info after successfully login.
  })

  $toast.success("Loggedin Successfully!");

  } catch(e){
    console.log(e)
  }
}
</script>

And If I set the getSession inside nuxt.config.ts endpoints object to false, the getSession running automatically sends wrong endpoint continuously. Maybe its is a bug actually.

How would you implement this?

getSession('endpoint', request.body.object, ...other params)

Additional information

  • Would you be willing to help implement this feature?

Provider

  • AuthJS
  • Local
  • Refresh
  • New Provider
@adorratm adorratm added enhancement An improvement that needs to be added pending An issue waiting for triage labels Mar 4, 2024
@zoey-kaiser
Copy link
Member

Hi @adorratm 👋

It's not an issue with your English! Thank you for trying your best 🤗

My main question would be: Is your OAuth provider a custom one written internally or is it a publicly available one like Google, Github etc.? Depending on the case I have two recommendations on how to proceed:

Public OAuth Provider

So I generally see that you are using your own signIn function, while still using OAuth. I would recommend letting our module handle this for you. Inside your NuxtAuthHandler you can create setup to use OAuth providers.
We then return a signIn function that you can use the sign in the user. NuxtAuth will then automatically handle the session and JWT Token management.

You will then be able to access the user data with:

<script lang="ts" setup>
const { data } = useAuth()
</script>

This data will update whenever any change is made to the data or the authentication status is changed.

I think a good starting point would be to have a look at the NuxtAuthExample in which we configure a GitHub OAuth provider.

As we run NextAuth under the hood, there is a long list of OAuth providers, you can use out of the box. You can see them here: https://next-auth.js.org/providers/

Custom OAuth

In this case you could look into writing your own OAuth provider for NextAuth. This would then allow you to use all of the features described above when working with your custom API: https://next-auth.js.org/configuration/providers/oauth#using-a-custom-provider

As I saw that you were combining the local and refresh provider with OAuth, I would start by following one of the two methods above. The local and refresh providers are not meant for OAuth authentication and focus more on filling the need for credentials authentication!

If I misunderstood your request feel free to correct me

@zoey-kaiser zoey-kaiser added question A question about NuxtAuth and removed enhancement An improvement that needs to be added pending An issue waiting for triage labels Mar 4, 2024
@adorratm
Copy link
Author

adorratm commented Mar 5, 2024

Hi @adorratm 👋

It's not an issue with your English! Thank you for trying your best 🤗

My main question would be: Is your OAuth provider a custom one written internally or is it a publicly available one like Google, Github etc.? Depending on the case I have two recommendations on how to proceed:

Public OAuth Provider

So I generally see that you are using your own signIn function, while still using OAuth. I would recommend letting our module handle this for you. Inside your NuxtAuthHandler you can create setup to use OAuth providers. We then return a signIn function that you can use the sign in the user. NuxtAuth will then automatically handle the session and JWT Token management.

You will then be able to access the user data with:

<script lang="ts" setup>
const { data } = useAuth()
</script>

This data will update whenever any change is made to the data or the authentication status is changed.

I think a good starting point would be to have a look at the NuxtAuthExample in which we configure a GitHub OAuth provider.

As we run NextAuth under the hood, there is a long list of OAuth providers, you can use out of the box. You can see them here: https://next-auth.js.org/providers/

Custom OAuth

In this case you could look into writing your own OAuth provider for NextAuth. This would then allow you to use all of the features described above when working with your custom API: https://next-auth.js.org/configuration/providers/oauth#using-a-custom-provider

As I saw that you were combining the local and refresh provider with OAuth, I would start by following one of the two methods above. The local and refresh providers are not meant for OAuth authentication and focus more on filling the need for credentials authentication!

If I misunderstood your request feel free to correct me

Thanks for your answer but in this scenario I don't use any public Oauth provider. I try to use "Refresh" provider for the backend developer's developed rest api. The backend developers I don't know why didn't make this endpoint work only with Bearer Token, but maybe the getSession method in this library can be developed flexibly for such situations? That's what I meant to ask. In such cases, user information is requested with the Bearer token in the Axios library in Nuxt 2. It was possible to proceed with the setUser method.

@phoenix-ru
Copy link
Collaborator

I don't use any public Oauth provider.

Hi @adorratm , have you set the provider to refresh in your nuxt.config.ts?

export default defineNuxtConfig({
  auth: {
    provider: {
      type: 'refresh',
     /* ... */
    }
  }
}

@adorratm
Copy link
Author

I don't use any public Oauth provider.

Hi @adorratm , have you set the provider to refresh in your nuxt.config.ts?

export default defineNuxtConfig({
  auth: {
    provider: {
      type: 'refresh',
     /* ... */
    }
  }
}

Yes I’ve already set it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question A question about NuxtAuth
Projects
None yet
Development

No branches or pull requests

3 participants